If some images are overlapping the menu bar when scrolling through your website, here is the fix for this bug.
- Click into “design” and into “edit html/css”
- Click on main_style.css to open the css codes
- Locate this codes:
.singlepage-scroller #header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-height: 90px;
background: url(navbg.jpg);
border-bottom: 1px solid #ccc;
z-index: 2;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
Here change the z-index to 11 like this
.singlepage-scroller #header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-height: 90px;
background: url(navbg.jpg);
border-bottom: 1px solid #ccc;
z-index: 11;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
Directly below it, insert this new code:
#icontent .singlepage-scroller #header {z-index:2;}
The completed code will look like this:
.singlepage-scroller #header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-height: 90px;
background: url(navbg.jpg);
border-bottom: 1px solid #ccc;
z-index: 11;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
#icontent .singlepage-scroller #header {z-index:2;}
4) Save & exit
5) Re-publish the site to update the new coding