Header Menu on Homepage

[Jenny Anderson]

Hi Bill,

I’m trying to add a semi-transparent menu bar on my homepage hero so that it is easier to read. What is the best way to do that?

Thanks!

[Bill Robbins]

Hi Jenny,

You can change that. Here’s how:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box. It looks like there is an extra:

   
   }
   

   at the end there. Go on and delete it and then add this:

   
   body.hero.home #header {
   	background-color: rgba(255, 255, 255, 0.95);
   }
   

4. Save your changes.

See if that doesn’t give you a background color to your header there. Feel free to replace the rgba color with a different one if you’d like to.

Take care,
Bill

[Jenny Anderson]

Awesome! Thanks Bill

[Jenny Anderson]

Actually, is there a way to put a shadow behind the menu words to make them pop? The background doesn’t look great on the hero image. Thanks

[Bill Robbins]

Hi Jenny,

Have you tried swapping out the navigation menu item’s colors for something else before the scroll background gets added? I believe there are options for that a ways down in the Hero Area Options box when you’re editing a page. You might try changing the color of them to white so they’ll pop on top of the hero before switching to the default after the scroll styling applies.

Bill

[Jenny Anderson]

Hi Bill,

Yes i have tried multiple colors, one or two items get lost in each color so trying to find a solution. Is the shadow possible? If not i’ll figure something out.

THanks

[Bill Robbins]

You can apply just about any CSS property you’d like to. The “key” that targets the home, header before the scroll is applied is:

body.hero.home #header

You could style something this way:

body.hero.home #header nav#top-menu ul li a {
	text-shadow: 0 1px 2px black;
}

After a style like that you would need to remove the shadow once the scroll happens which would look something like this:

body.hero.home.scroll #header nav#top-menu ul li a {
	text-shadow: none;
}

Hope that gives you some options to create the right look here for you.

Bill

[Author]

Posts