Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap navbar-fixed-top class, not working

Tags:

Building out portfolio site using Bootstrap - I'm applying the 'navbar-fixed-top' class in order to get the navbar to stick to the top of the window, such as in this example:

https://getbootstrap.com/examples/navbar-fixed-top/

I'm trying to do so using this code:

<nav class="navbar navbar-fixed-top">   <div class="container">     <div id="navbar" class="navbar-collapse">       <ul class="nav navbar-nav">         <li>About</li>         <li>Projects</li>         <li>Contact Me</li>       </ul>     </div>   </div> </nav> 

However, the navbar is still scrollable when I apply it to my own webpage. You can view the page here:

http://codepen.io/BenWS/pen/gmLEVw

like image 465
BenWS Avatar asked Mar 22 '17 09:03

BenWS


People also ask

How do I create a fixed top navigation bar in bootstrap?

Set the navbar fixed to the top, add class . navbar-fixed-top to the . navbar class.

How do I make navbar stay on top in bootstrap 4?

Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.

How do I keep the navbar always on top?

I found it necessary to add a z-index with a high enough number for the navbar to appear always on top of other elements.

Which Bootstrap CSS class will you use to put the navbar at the top of the page?

Use the . navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).


1 Answers

Because you are using the newest version of bootstrap (bootstrap4 beta6).

They change from .navbar-fixed-top to .fixed-top

You have to read document in this link.

like image 142
lahphim Avatar answered Sep 20 '22 19:09

lahphim