Menu
I've been trying to apply this Bootstrap 4.0 - Two NavBars that collapse into one toggle answer to my issue but am not resolving it after some effort.
I'm trying to have the content of both navbars collapse into one toggle button.
The two issues are once collapsed to sm my toggle button doesn't display its content (from either target), and that at sm width my lower navbar does not maintain it's height. My code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target1, #collapse_target2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target1">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<a class="navbar-brand">
<img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em">
<span>Home</span>
</a>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="collapse navbar-collapse" id="collapse_target2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 7</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
822
Use a single class to data-target the Navbars, instead of different id's. For example, give both the navbar-collapse elements the navbars class, and then the target is data-target=".navbars".
Demo: https://www.codeply.com/go/PvHpcBNuAp
Also, I'm not sure why you're using If you want both navbars fixed at the top, see this answer.sticky-top on the 1st navbar. You should remove that otherwise the 2nd navbar will slide under the first on mobile when scrolling.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbars" id="collapse_target1">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<a class="navbar-brand">
<img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em">
<span>Home</span>
</a>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="collapse navbar-collapse navbars" id="collapse_target2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 7</a>
</li>
</ul>
</div>
</nav>
Also see: Bootstrap 4 navbar with 2 rows
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
