cssnavbarnav

Bootstrap navbar not moving down while scrolling


I've been looking for answers on here and several other sites on this. There have been some, but I can't seem to get it to work still. I have the following navbar:

<nav class="navbar">
  <a href="#About">About me</a>
  <a href="#Education">Education</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#Contact">Contact</a>
</nav>

I've tried it with and without a div container on the inside of the nav tags.

Here's the corresponding CSS:

nav {
  text-align: center;
  position: fixed;
  top: 0;
  lef: 0;
  right: 0;
  height: 35px;
  padding-top: 15px;
  box-shadow: 0px 0px 8px 0px;
  -webkit-box-shadow: 0px 0px 8px 0px;
  -moz-box-shadow: 0px 0px 8px 0px;
  background-color: gray;
  width: 100%;
  z-index: 100;
}

I've also tried it without z-index: 100; If anyone knows what I'm missing, or if I need something else to add, I'd be interested in seeing what it is and where I can read up on it so I get it.

Thanks :)


Solution

  • You have a CSS rule for calss .navbar in there with position: relative. This overrides the fixed setting for nav

    Add !important to your position:fixed setting for nav:

    nav {
      text-align: center;
      position: fixed !important;
    

    etc.

    This should fix it.

    http://codepen.io/anon/pen/ZWBwEW