Home page Navigation Bar

[Deirdre Fleming]

Good morning

On my home page (not yet live), I currently have a featured image, and the page is formatted as an image with main content and right sidebar. I notice that the navigation bar background only appears when I scroll down past the image, and the navigation bar content appears against the background of the image. Is there any way to make the navigation bar background appear above or in front of the image, so that it stays consistent all the way down the page?

Regards
Deirdre

[Bill Robbins]

Good Morning Deirdre,

You can set a background color for the header before it’s scrolled down. I would also suggest moving the hero section down just a bit so the now opaque header doesn’t cover it up. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #header {
   	background-color: #000;
   }
   
   body.image #hero-section,
   body.gallery #hero-section,
   body.video #hero-section  {
   	top: 70px;
   }
   

   Just replace the #000 with the color you’d like your header background to be.

3. Update your settings.

Check the color and position of your header/hero and see how that works for you. You can move the hero section up or down by changing the 70 in the snippet above.

If you have any questions or trouble, let me know.

Thanks,
Bill

[Author]

Posts