Transparent Navigation Bar

[Kelley Galownia]

Hi again Bill,

I’m sorry for the multiple questions. I’m sure this has already been answered somewhere else, but I’ve tried other coding solutions and haven’t seen results on my website. I’ve changed the navigation bar at the top to be a darker green to go along with our branding; however, I’d love for the dark green bar to be a bit transparent. I loved how the demo had that feature and hate that I lost it when I changed the color of the bar.

Thanks in advance for the help!
Kelley

[Bill Robbins]

Hello Kelley,

Excellent question there (questions are always welcome too). You can use a semi-transparent color for your header. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header,
   body.hero #header.scroll {
   	background-color: rgba(0, 103, 53, 0.80);
   }
   

3. That should make the green color you have now 80% opaque. You can make it more or less opaque by changing the 0.80 in the snippet above. It’s on a scale from 0 (completely transparent) to 1.0 (completely opaque).
4. Update your settings.

See how that works for you now. Let me know if you have any trouble.

Have a great day,
Bill

[Kelley Galownia]

You’re great! Thank you!

[Bill Robbins]

Happy to help out Kelley 🙂

[Kelley Galownia]

One final question (I think!): Is there a way to switch up the order that staff and sponsors appear on their respective pages?

Thanks again, Bill!

[Bill Robbins]

Glad that helped out Kelley. The best way to change the order is with a plugin called Simple Page Ordering. Despite its name, it’ll let you arrange the order of your staff and sponsors via drag and drop. That way you don’t have to assign numbers to each individual staff/sponsor to set the order.

Bill

[Kelley Galownia]

Great – thank you!!

[Author]

Posts