Navigation menu opacity

[Gor]

Good morning Bill,

I am working with the Agency template and I would like to recue an option from Bottega theme: navigation menu & dropdown menu opacity.

In the template I´m working with, the navigation background color hover is like a solid color (in this case # 9a0000 as you can see in the picture ) can I give it some degree of transparency.

I wold like to do the same with the Drop-Down Navigation Background.

As always thank you very much.

Gor

—
site url login

user: paginaenpruebas
password: autoescuelapreciado

Attachments:

1. 

   3-13-2014-12-16-17-PM.png
   

[Bill Robbins]

Good Morning Gor,

You can add some transparency there. Here’s how:

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

   
   #nav-bar .menu li a:hover,
   #nav-bar .menu li:hover {
   	background-color: rgba(154,0,0,0.5);
   }
   
   #nav-bar .menu li ul {	
   	background-color: rgba(0,0,0,0.5);
   }
   

   The first style there is for the hover color and the second is for the drop-down menu. Both use RGBA colors which are just RGB colors with an alpha channel value added to the end to control the transparency. In these cases, the colors are 0.5 or 50% transparent. You can adjust that number to make them more or less transparent.

3. Update your settings.

See how that works for you and let me know if you run into any trouble.

Thanks,
Bill

[Gor]

Well done Master!!

That was what I wanted 😉

Thank you very much.

[Bill Robbins]

Anytime 🙂

[Author]

Posts