Why are my elements stacking?

HTML-CSS
#1

Hi! I am working on a site and I have an issue with the content of the page being under my navigation dropdown, making my nav links unclickable… Z-index doesn’t seem to fix this issue for me and I’m lost on what else could allow elements to stack like this. Does anyone have any ideas about what could be causing this? Thanks in advance.

https://community.acplanners.org/duplicatesitepublic/advisors/why-join

aaa
aaa1278×666 70.2 KB

#2

It is caused by this custom CSS for centering the nav, specifically the transform.

@media screen and (min-width: 768px) {
  .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

Remove that CSS and add the class col-sm-offset-3 to the nav container div to center it.

<div class="col-md-12 col-sm-offset-3">
  <ul class="nav navbar-nav">
   nav content...
  </ul>
</div>
1 Like
#3

Thank you so much! I would have spent forever finding that.

#4

No problem, stacking context can be surprisingly tricky.

1 Like
#5