Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
Image overlapping the menu bar in Scrollboard

Image overlapping the menu bar in Scrollboard

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

Tags: