Menu Bar Not Scrolling Down

HTML & CSS
1

Hello, if you look at this page the menu bar is not scrolling down as the User scrolls down the page https://www.annerleyaquarium.com.au/aquariums.htm

Can anyone tell me how to fix this?

2

Hello @brandon47 , Currently your navigation bar is not in fixed position so it will scroll with page as user scrolls the page. So You have to make the header fixed so that when user scrolls the page navigation bar will not scroll.

3

If you are trying to do it with bootstrap’s afix class then you need jquery to go with the bootstrap js.

4

Thankyou, can you show me how to do this?

5

Sure, you can achieve by the following CSS and some jQuery. When user scrolls the page at a certain point we are adding a class to fixed the navbar.

CSS

.header-cover {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
    top: -50px;
}

.header-cover.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1036;
    box-shadow: 0 3px 12px -4px rgb(0 0 0 / 70%);
}

.header-cover.fixed-top .nav.navbar-nav {
    border-radius: 0;
}

Jquery

<script>
    $(window).scroll(function () {
        scroll = $(window).scrollTop();

        if ($(window).width() > 991) // Header will get fixed only if window size is greater than 991px
         {
            if (scroll >= 120) // You can change the scroll value, I have set it to 120 
            {
                $(".header-cover ").addClass("fixed-top");
            }
            else {
                $(".header-cover").removeClass("fixed-top");
            }
        };
    });
</script>
1 Like
6

Just add jquery and it will work without any extra code as you are using bootstrap. You don’t need to write your own code unless you want to or are dumping the framework.

Just add jquery to your code and it will work out of the box.

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>       
  <script src="jsone/bootstrap.min.js"></script>

I added it to your page locally and the fixed header works straight away.

Screen Shot 2021-06-15 at 10.27.12
Screen Shot 2021-06-15 at 10.27.121501×467 140 KB

You do have a link to jquery in your page but it is a 404 file not found page. Link to the correct version of jquery for that old bootstrap layout you are using.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.