How to make navbar fixed in Bootstrap?

Question

I'm trying to make this template have a fixed navbar: here

I'm a beginner at CSS, so sorry about the silly question. When I try to make .masthead have position:fixed, the "Home About Contact" part disappears.

Thanks in advance!

Answer 1

First, you need to add some CSS to the header so it can be used as a fixed header. It needs a background color, and a given width:

.masthead {
    width: 700px;
    background: white;
}

Then, because the header is not aligned with the top of the page, you'll need some javascript to make it stick to the top:

<script>
$(document).ready(function() {

    var div = $('.masthead');
    var start = $(div).offset().top;
        
    $.event.add(window, "scroll", function() {
         var p = $(window).scrollTop();
         $(div).css('position',((p)>start) ? 'fixed' : 'static');
         $(div).css('top',((p)>start) ? '0px' : '');
    });
});
</script>

Answer 2

The problem : When you set position:fixed, the width of the masthead becomes the size of the elements inside by default. Usually you would be able to declare width:100% on the masthead so it stretches the entire width of the parent div, but in this case, setting percentage width on the fixed element makes it calculate based on the width of the viewport : see here for more details: Percentage width for fixed elements?

Since the rest of the content has a max-width of 700px, we can set the width of the masthead to also be 700px but the issue is when you shrink the viewport, the rest of the page will shrink but the masthead won't. Setting max-width on the masthead doesn't work because its original width is less than 700px.

.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}

Note that we set the background to white otherwise the bar will by default have a transparent background and the elements underneath will just intersect -- very ugly. We set the top property to 0 so it is now attached to the top of the page and doesn't leave a gap when we scroll.

(The border I added was just for looks, you can remove that if you'd like.)

Since we set the masthead to fixed positioning, it is now removed from the page flow, so everything else in the page acts like the masthead wasn't there. That leads to an issue: everything in the page shifts up, and one of the <hr /> s on the top becomes hidden. To solve this, we add a margin-top: 50px; to the top <hr /> , and everything is shifted downwards.

Due to the default margin styling ( margin-bottom: 20px; margin-left: 0;) on .nav s in bootstrap the "Home About Contact" section ends up looking a bit awkward. We fix this by setting the margins to something more appropriate: margin: 14px 0;

Quick Note : I applied all these styles as inline in the chrome web inspector, so that they would override any other properties

Edit : Actually, it works nicely too if you just delete the HR from the document with the web inspector

Answer 3

Look at the boostrap navbar docs

Here is an example of a fixed navbar using bootstrap:

       <div class="navbar navbar-fixed-top" style="position: absolute;">
          <div class="navbar-inner">
            <div class="container" style="width: auto; padding: 0 20px;">
              <a class="brand" href="#">Title</a>
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div>
          </div>
        </div>

Answer 4

This is a navbar that works with position: fixed :

<div class='container'>
    <div class='navbar'>
        <div align='right'> <a class='menu1 menu-item'>Home</a>
 <a class='menu2 menu-item'>About</a>
 <a class='menu3 menu-item'>Contact</a>

        </div>
    </div>
</div>

http://jsfiddle.net/H9mMk/3/

Answer 5

adding "fixed-top" to the class will do the job:

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
     <!-- Navbar content -->
    </nav>

source: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php