CODEWITHSUNDEEP
htmltwitter-bootstrap
Andre
Andre

Reputation: 123

Bootstrap navbar fixed-top

I have a website that has a navbar fixed to the top of the website and it tracks down when scrolling. This feature works fine through Bootstrap and should remain the same. I need to add a fixed 50px container above the nav bar that does not track down with the nav bar. When I tried to implement it, the nav bar either covered it or the container tracked down.

<header>
  <nav class="navbar navbar-nav navbar-dark bg-alumni navbar-expand-md fixed-top nav-fill">
  <div class="container">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <a class="nav-link nav-item navbar-brand nav-justified" href="beta.html#">
    <img src="images/AlumniHallName_solo.svg" class="d-inline-block float-lg-left float-md-left" id="nav-logo">
   </a>
   <div class="collapse navbar-collapse justify-content-end col-lg-4 col-md-6" id="navbarNav">
     <a class="nav-link nav-item link" href="beta.html">About</a>
     <a class="nav-link nav-item link" href="faith.html">Faith</a>
     <a class="nav-link nav-item link" href="sports.html">Sports</a>
     <a class="nav-link nav-item link" href="pups.html">Pups</a>
   </div>
  </div>
  </nav>
</header>

Upvotes: 3

Views: 4254

Answers (1)

cela
cela

Reputation: 2510

Here is what I could come up with. It dynamically changes the nav bar to fixed using jQuery. You can use the console.log to test when to switch to a fixed nav menu. I will post some of the code here, but I recommend looking at my code pen here.

$(function() {
  $(window).scroll(function() {

    //use this number to determine when to switch to fixed menu
    console.log($(window).scrollTop())

    if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');

    if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');

  });
});
.banner {
  height: 50px;
  width: 100%;
  background-color: red;
}

#navbar {
  border: 0;
  background-color: #4080ff;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

.navbarFixed {
  top: 0;
  position: fixed;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">Hello, Alec!</div>
<div id="navbar">
  <a>About</a>
  <a>Faith</a>
  <a>Sports</a>
  <a>Pups</a>
</div>

Upvotes: 2

Related Questions