{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 仙女界的扛把子 的问题《Bootstrap 4 collapsing two navbars into one toggle》','https://www.manongdao.com/q-1180167.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
To control more than one navbar with one toggler use a class instead of an id for the
data-targetattribute. In the example below I used the classnavbar1and2.To maintain the height of the second navbar the same as in the uncollapsed state you can add
style="min-height: 56px"to that navbar.Click "run code snippet" below and expand to full page for testing:
Use a single class to data-target the Navbars, instead of different id's. For example, give both the navbar-collapse elements the
navbarsclass, and then the target isdata-target=".navbars".Demo: https://www.codeply.com/go/PvHpcBNuAp
Also, I'm not sure why you're usingIf you want both navbars fixed at the top, see this answer.sticky-topon the 1st navbar. You should remove that otherwise the 2nd navbar will slide under the first on mobile when scrolling.Also see: Bootstrap 4 navbar with 2 rows