How to make scrolling collapsing navigation navbar-fixed-top?
Question
How to make scrolling collapsing navigation navbar-fixed-top bootstrap4 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Fixed top</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> ☰ </button> <div class="collapse" id="exCollapsingNavbar"> <div class="pa-1"> <ul class="nav navbar-nav nav-pills nav-stacked"> <li class="nav-item"> <a class="nav-link active" href="#">Active</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> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </div> </div> </nav> </div> </body> </html>
1 answers
solution1
3 ACCPTED 2016-09-12 11:02:38
In 4 alpha you to add some CSS to make the navbar stack vertically when collapse like 3.x..
.navbar .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar .navbar-nav {
float:none !important;
max-height: 240px;
overflow: auto;
}
.navbar .collapse.in, .navbar .collapsing {
clear:both;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to create a scrollspy navbar-fixed-top after scrolling in bootstrap?
How To Highlight Show Active Tab In A Navbar-Fixed-Top
how to make the navbar fixed to top
Bootstrap navbar-fixed-top hides #content links
Dual bootstrap menu's with navbar-fixed-top
Twitter Bootstrap navbar-fixed-top repositioning on page
Onepage bootstrap navbar toggle not working properly in mobile mode when set as navbar-fixed-top
Why is the body being hidden behind navbar when i use navbar-fixed-top
I can't get Bootstrap 3.3.7 navbar-fixed-top to work
Why doesn't Twitter bootstrap class navbar-fixed-top work?
Related Tags