'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

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;
}
htmlcsswordpress


Solution 1:[1]

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

Solution 2:[2]

Bootstrap is currently using these values for z indexes: https://getbootstrap.com/docs/5.0/layout/z-index/

CSS:

#search-nav {
    z-index: 1100;
}

this should do

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vincent G
Solution 2 Solt Agod

Related Questions