'bootstrap 4 header not completely responsive
I am trying to develop a completely responsive Bootstrap 4 fixed header. It does not work for all sizes - it wraps around.
The test site can be found here: Home Page
#header .navbar-brand {
font-size: 40px;
color: #f4f4f4;
}
#header .navbar {
padding-right: 30px;
}
#header .navbar a {
color: #f4f4f4;
font-family: 'PT Sans', sans-serif;
font-weight: 700;
}
#header .navbar li {
padding-right: 18px;
}
#header .navbar-brand {
line-height: 28px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<section id="header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mtlNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="mtlNavbar">
<ul class="nav navbar-nav navbar-center">
<li class="lead_1"><a href="#">HOME</a></li>
<li class="lead_1"><a href="#center">ABOUT</a></li>
<li class="lead_1"><a href="#gallery">HOW WE HELP</a></li>
<a class="navbar-brand" href="#"><img src="images/mtlLogo-blackBackground.png" width=150px></a>
<li class="lead_1"><a href="#benefits">BENEFITS OF SPORTS</a></li>
<li class="lead_1"><a href="#donate">DONATE</a></li>
<li class="lead_1"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</nav>
</section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>Can anyone help me figure out why the header is wrapping? It especially happens when testing iPads, but I suspect there are other widths it does not work for. Thanks
Solution 1:[1]
I figured it out.
Instead of
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
I used:
.navbar-nav.navbar-center {
position: relative;
left: 50%;
transform: translatex(-50%);
}
Solution 2:[2]
It looks to me like you're trying to create a menu with a centered logo and display the first three menu items to the left of the logo and the remaining three to the right.
Placing the logo as one of the menu elements is not a good idea, considering what Bootstrap does under the hood and all the implications on mobile devices. It might work, but is not ideal.
In my estimation, the cleanest way to do it is to create a separate menu having only the first three items and hide it on mobile. The "normal" menu will also hide its first three items at all times, except on mobile.
Here's an example:
#first-container,
#navbarNav {
flex-basis: 0;
flex-grow: 1;
}
#first-container {
justify-content: flex-end;
}
.navbar-brand {
margin-left: 1rem;
height: 40px;
overflow: visible;
}
.navbar-toggler {
margin-bottom: auto;
}
@media (max-width: 991px) {
.navbar-brand {
margin-left: 0;
position: relative;
}
#navbarNav {
flex-basis: 100%;
}
.navbar-brand img {
position: absolute;
top: 0;
left: -.5rem;
}
.navbar-nav:not(#_) {
padding-left: 11rem;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<ul id="first-container" class="navbar-nav d-none d-lg-flex flex-row ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
One
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Three</a>
</li>
</ul>
<a class="navbar-brand" href="#"><img src="https://i.stack.imgur.com/jurhp.jpg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse mr-auto">
<ul class="navbar-nav">
<li class="nav-item d-block d-lg-none">
<a class="nav-link" href="#">
One
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item d-block d-lg-none">
<a class="nav-link" href="#">Two</a>
</li>
<li class="nav-item d-block d-lg-none">
<a class="nav-link" href="#">Three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Four</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Five</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Six</a>
</li>
</ul>
</div>
</nav>In my example, #navbarNav is the id of the "normal" navbar (as I've taken it directly from their examples). #first-container is the one I added. I tried to keep the overrides to an absolute minimum.
Important note: in what you have, the logo is not centered. The menu is centered, as a whole, but your logo is off from page center (you'll notice when scrolling). In what I made above, the logo be always centered, and left/right menus can have variable sizes, they don't push the logo around.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Peter Csala |
| Solution 2 |