我正在使用引导程序4创建一个应用程序,其中有两个导航栏,并且都需要固定在顶部,第二个导航栏需要在滚动时隐藏。
HTML:
导航栏1:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light">
<div class="container-fluid">
<div class="row w-100">
<div class="col-md-2 col-lg-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#">
New Project
</a>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2">
<h4 class="font-weight-600">
Little description
</h4>
</div>
<div class="col-3"></div>
<div class="col-3 mt-3 d-none d-sm-none d-md-block">
<ul class="navbar-nav pl-5">
<li class="nav-item mr-3">
<a class="nav-link" href="#">
Notification
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize" href="#">
Hello Admin
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize mr-3" href="#">
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
search
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
导航栏2:
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
这两个导航栏都需要固定在我使用过fixed-top
类的顶部。
但是到目前为止,导航栏彼此重叠。
您可以在链接https://www.bootply.com/y8EfMpCMc4#中看到发生重叠的地方。
请帮助我将导航栏2固定在导航栏1下方(这也需要响应),其中对于小型设备,导航栏2单独需要折叠,并且必须位于导航栏1的右侧navbrand,即New Project
的权利。
答案 0 :(得分:1)
在第一天使用sticky-top
而不是fixed-top
,并通过移除fixed-top
使第二个导航栏保持静态。
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>
演示:https://www.codeply.com/go/vbF0Sch9xc
相关:
Bootstrap 4 collapsing two navbars into one toggle button
Bootstrap 4 Multiple fixed-top navbars