Need help making navbar sticky

HTML-CSS
1

Hello, I’m trying to make my navigation bar stick to the top when I scroll down but it won’t work. I’ve messed around with the nav CSS and tried to put position to sticky but that won’t work. Here is my code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Faizan Khan Portfolio Page</a>
  <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>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
    
      <li class="nav-item">
        <a class="nav-link" href="#AboutPage">About </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

and CSS

nav {
  position: fixed;
  font-family: Montserrat;
}

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  }

and my codepen https://codepen.io/fkhan698/pen/bxKOvm?editors=1100

I would really appreciate any help

2

Faizan, you don’t have an id “navbar”, but you assigned a property “position: fixed” to an id #navbar.
Change it to class name .navbar:

.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

I also suggest assigning z-index, so your navbar will be above all other layers, if you want it to be so.
Cool portfolio!

1 Like
3

Thank you for the great answer! I couldn’t find a fix for the navbar and got so demotivated that I stop working on the Product Portfolio page for a long time before I got back on it. I searched all over the web to find a solution using plain HTML and CSS. I definitely should have come here earlier. :slight_smile:

1 Like