How to fixed the button in navigation bar on scrolling
Question
I have 6 fields in my navbar. 5 of them are links and one is dropdown. When I scroll the page all field remains fixed except the dropdown field. enter image description here
Below is my code:
<div class="collapse navbar-collapse" id="Food-fair-toggle"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">about</a></li> <li><a href="#pricing">menu</a></li> <li><a href="#featured-dish">featured</a></li> <li><a href="#reserve">reservation</a></li> <li><a href="#contact">contact</a></li> <li> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="https://deliveroo.nl/">Deliveroo</a> <a href="https://www.foodora.nl/">Foodora</a> <a href="https://www.ubereats.com//">UberEats</a> </div> </div> </li> </ul> </div> <!-- /.navbar-collapse -->
3 answers
solution1
0 2018-10-18 05:34:34
Can you try the below menu bar along with the dropdown menus.
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
solution2
0 2018-10-18 06:50:09
Please try with below HTML, JS and CSS. Just change structure, create separate for dropdown with same class. Then you must add id attribute for menu UL.
HTML:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right" id="myHeader">
<li><a href="#about">about</a></li>
<li><a href="#pricing">menu</a></li>
<li><a href="#featured-dish">featured</a></li>
<li><a href="#reserve">reservation</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://deliveroo.nl/">Deliveroo</a>
<a href="https://www.foodora.nl/">Foodora</a>
<a href="https://www.ubereats.com//">UberEats</a>
</div>
</div>
</li>
</ul>
</div>
JS:
Copy & paste the JS in footer section.
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
CSS:
ul.sticky {
position: fixed !important;
background: #27752A;
}
solution3
0 2018-10-18 07:24:00
Below Example shows how to add dropdown menu in bootstrap-4 navbar.
And if you want to fix the navbar on top, then you can add class='fixed-top' in <nav> component then menu will stick to the top while you scroll down.
Or if you dont want navbar menu fixed on top then you can remove that class fixed-top from navbar.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="bg-success navbar navbar-dark navbar-expand-sm"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#pricing">MENU</a> </li> <li class="nav-item"> <a class="nav-link" href="#featured-dish">FEATURED</a> </li> <li class="nav-item"> <a class="nav-link" href="#reserve">RESERVATION</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> DROPDOWN </a> <div class="dropdown-menu"> <a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a> <a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a> <a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a> </div> </li> </ul> </nav> <br> <div class="container"> <h3>Navbar With Dropdown</h3> <p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p> </div> </body> </html>
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.