How to I bring my sticky navbar in front of the contents on my page?


I’m using wordpress and bootstrap and I have a a navber that sticks to the top of the page when scrolling, problem is it falls behind some of the contents on the page (see image for reference). How to I get the nabber to always be in front of whatever its scrolls past? Thanks in advance.

enter image description here


<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="91" id="search-nav"></nav>


#search-nav {
  height: 50px;
  width: 100%;
  background-color: #000;


You can try to put a value of z-index combined with a defined position (could be fixed, absolute, relative .. ) which is higher than the default z-index value of the below elements.

Source :

Answered By – Vincent G

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.