Main navigation menu to not move when scrolling the page

  • I am using custom ccs code plugin, to change the main navigation bar.

    I am able to keep the position fixed but when I add that into the custom css the colour on the main navigation disappears. So the Menu is fixed when I scroll up and down but the colour is missing.

    I have taken the code out now, if you visit my site, I just want the main navigation bar exactly as it is, But to be fixed and not move when scrolling down.

    wwww.daiburchell.com

    Thank you and I look forward to hearing from you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • #masthead {
	position: fixed;
	width: 100%;
}

#content {
	padding-top: 150px;
}

    With this code, I don’t see the menu losing color when I scroll up and down. What code were you using before?

    Thread Starter yehaahomer

    (@yehaahomer)

    I was using just
    #site-banner {
    Postion: fixed;
    {

    I have used the code you have given me but if you look at the website its still not quite right.

    Oops. Copy-and-paste error on my part. Try adding this code:

    .home #content {
	padding-top: 0;
}

    This way, the content area on your home page won’t have any padding applied to the top.

    Thread Starter yehaahomer

    (@yehaahomer)

    Were getting closer. Its still not quite right…

    Also if you look on contact page and scroll up and down, it puts content forward over the main menu…

    Thank you

    You’ll probably want to set a higher z-index on the header:

    #masthead {
	position: fixed;
	width: 100%;
	z-index: 10;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Main navigation menu to not move when scrolling the page’ is closed to new replies.

Tags