Why does everything go on the top my navigation menu that is sticky on scroll

When I scroll down my nav is hidden under everything it is hidden even though I put the position: sticky;.


/* Basic styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}



nav {
  background-color: #000;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  margin-bottom: -10px;
  position: sticky;
  top: 0;
}
nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
     color: rgb(233, 221, 221);
}


.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}
.item {
  padding: 10px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.menu li a {
  display: block;
  padding: 15px 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
  color: white;
}

.toggle:hover {
     color: white;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
 
  .toggle {
    flex: 1;
    order: 2;
    color: white;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}

<nav>
   <ul class="menu">
      <li class="logo"><a href="https://uprightcode.com/">Upright Code</a></li>
      <li class="item"><a href="https://uprightcode.com/">Home</a></li>
      <li class="item"><a href="#About">About</a></li>
      <li class="item"><a href="#plans">Plans</a></li>
      <li class="item"><a href="https://uprightcode.com/Lessons">Lessons</a>
      <li class="item"><a href="https://uprightcode.com/CEO-ONLY.php">CEO</a>
      </li>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
</nav>


const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");


/* Toggle mobile menu */
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
    } else {
        menu.classList.add("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
    }
}



/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
    if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
    }
    item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);

Just go to uprightcode.com to see my website I’m not doing all that work. I AM ADDING BACK THE COMMING SOON REDIRECT IN 3 DAYS. :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary:

Hi @CodeingMAN !

You will get more responses to your post if you post a link to your project so people can see the issue for themselves.

1 Like

There is still no link to your project. You are asking people to either a) see what’s wrong just by looking or b) make their own version of your project with the bits and pieces of code you provided.

Please provide a live link to your project to make it easier for others to help you.

3 Likes

Just go to uprightcode.com to see my website I’m not doing all that work. I AM ADDING BACK THE COMMING SOON REDIRECT IN 3 DAYS. :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary: :weary:

I was able to get it stay in place with this code.
Maybe someone else has a better solution but this worked for me.

nav {
  background-color: #000;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  margin-bottom: -10px;
  position: fixed;
  top: 0;
  z-index:10;
  width:100%;
}

It always important to remember that everyone on the forum are volunteers.
If you make people jump through hoops just to help you then, they will probably just ignore your post.

Keep that in mind for future posts :grinning:

2 Likes

As shown all you need is a positive z-index.

BTW, your sticky offset of 0 will break halfway down the page because the height of the document (scroll container) doesn’t contain all the content. You will probably want to look into using vh for some of the heights you set instead.

1 Like

When you did this the bottom of the nav stretched out a bit and the gap re-appeared again how can I fix this?

You should update the site so we can see what is going on. I don’t see that happning when using the code posted (z-index and width).

But it looks like the gap you were closing before using a negative margin on the nav. Which BTW you do not need as you are the one that have created that gap by giving the nav ul a margin-bottom.

This CSS affects the nav ul:

ol, ul {
  margin-top: 0;
  margin-bottom: 10px;
}

Instead of doing this:

nav {
  margin-bottom: -10px;
}

I would suggest you unset (or set to 0) the margin-bottom for the ul inside the nav.

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: unset;
}
1 Like

Updated! You can now check back the bottom thing is still there the margin
there is still a large gap inside the nav and there is just another problem is where when I open my mobile menu it doesnt show the CEO tab.

I just realized the margin is coming from Bootstrap. But it is there.

I didn’t see you change the position on the nav from sticky to fixed which is why the negative margin on nav isn’t doing anything now. If you move the negative margin to .split-pane and make it a negative top margin instead it should work.

BTW I would probably suggest giving the .split-pane elements a container. If you do that you should be pulling that up instead (i.e. give the container the negative top margin).

oop I just changed it to sticky and the gap and the margin got fixed all together.

Yes, but because of the height you have set on html and body and how you are doing the height on elements that will break the sticky position. If you scroll down far enough it should stop working. If you check the height of the body element you can see why, it doesn’t take up the full height of the page.

You can have position fixed and still remove the gap by pulling up the elements that come after the nav. Before you were pulling up by using a negative bottom margin on the nav. All you have to do is use a negative top margin on the element that comes after the nav instead.

So instead of this:

nav {
  margin-bottom: -30px;
}

You have this:

.split-pane {
  margin-top: -10px;
}

Then how do I fix that problem?

I would just put the nav back to using position fixed and then close the gap by giving .split-pane the margin-top: -10px. That is much easier than trying to fix the height issue.

how about the GAP

[OFF TOPIC]
I saw once a spongebob squarepants episode called the mind gap.

Did you try what I told you to do?

/* nav CSS posted by jwilkins.oboe without your negative margin */
nav {
  background-color: #000;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  position: fixed;
  top: 0;
  z-index:10;
  width:100%;
}

/* Bootstrap margin removed, you don't really need this */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: unset;
}

/* close the gap */
.split-pane {
  margin-top: -20px;
}

Edit: You may have to adjust the negative margin to be less or more.

Another issue you will get with the fixed nav is the scroll position of the anchor links. You can fix this by using scroll-padding on the html element.

html {
  scroll-behavior: smooth;
  /* height of the nav */
  scroll-padding: 73px;
}

will scroll-padding: 73px; affect my scrollbar? and when I put it in I do not think visual studio code recognized it because the scroll-padding text was white and normally it is a different color not black white or grey.

And by the gap I man not the margin problem the gap inside at the inside of the bottom of the nav.

I don’t know what you mean by “affect my scrollbar”, it sets a scroll offset (MDN: scroll-padding).

VS Code is just a fancy text editor it has nothing to do with what works or doesn’t work in the browser. I also don’t know what you mean by “scroll-padding text”.

Not sure I know what you mean. But as I said, the ul inside the nav has a margin-bottom of 10px which you can unset using the .menu selector (as I showed).

I’m adding back the redirect guys!

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