Responsive Logo Issue
I am facing an issue with the logo in the header when viewed using Chrome developer tools in the Galaxy S5 responsive view. It seems that the logo container is too big and needs to be moved after the navbar, but I am unsure how to do this.
/* === Navigation ===*/
.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
color: #fff;
font-size: 0.9em;
font-weight: bold;
}
.navbar-dark {
background-color: #2e82b0;
}
.navbar {
min-height: 80px;
}
.navbar>.container {
border-bottom: 1px solid #fff;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 1.4em;
padding-bottom: 1.4em;
}
}
@media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
font-size: 1.2em;
}
}
**CSS**
/* === Header ===*/
.hero-bg {
background-color: #2e82b0;
}
.img-logo {
max-width: 60%;
margin-top: 15%;
margin-bottom: 10%;
}
.line {
border-bottom: 1px solid #fff;
}<!DOCTYPE html>
<html lang="de">
<head>
<!-- Important Meta Data -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Navigation
============================================================================================= -->
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top py-0">
<div class="container">
<button class="navbar-toggler btn-round" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle">
<span class="icon-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#texting" class="nav-link">Texting</a>
</li>
<li class="nav-item">
<a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
</li>
<li class="nav-item">
<a href="#impression" class="nav-link">Impression</a>
</li>
<li class="nav-item">
<a href="#ueber" class="nav-link">Über mich</a>
</li>
<li class="nav-item">
<a href="#kontakt" class="nav-link">Kontakt</a>
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- End Navigation -->
</header>
<!-- Header
============================================================================================= -->
<!-- Header -->
<section id="home" class="hero-bg">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- Scripts
============================================================================================= -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>