Main Navigation Background Bar over hero images

[Josh Gold]

I find that a number of images I use obfuscate the menu items. Is there any way to set the menu to have a semi transparent background bar or to force the menu bar to appear when it’s on top of a photo (just like how it appears when you scroll below an image)?

[Bill Robbins]

Hi Josh,

You can do that. Here’s how:

1. In your WordPress dashboard go to the Appearance section and click on Theme Options.
2. From the tabs at the top, choose Advanced and scroll down to the Custom CSS box at the bottom.
3. Add this there:

   
   #header {
   	background-color: rgba(236, 237, 236, 0.8);
   }
   

4. Save your changes.

That should give you a semi-transparent background to your header that matches the color you use as you scroll, only 80% opaque. You can change the 0.8 in the snippet above to adjust the opacity. Zero is completely transparent, 1.0 is completely opaque.

Thanks for posting here. That really helps me keep track of questions, and keeps email apps from mangling any code snippets that need to be sent too. If you run into trouble let me know.

Take care,
Bill

[Author]

Posts