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

Question

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.

HTML:

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

CSS:

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

Solution

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 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

Comments

[Gaurav Jariwala]

Try assigning z-index in #search-nav css rule.