If some images are overlapping the menu bar when scrolling through your website, here is the fix for this bug.

1. Click into “design” and into “edit html/css”
2. Click on main_style.css to open the css codes
3. 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