Viewing Dropdown menu color

Dropdown menu color



User: Robert.tilly 8 years ago
Hello,

is it possible to set the drop down submenu background color to transparent
thanks

Robert
User: Roddy 8 years ago
Paste this style into the Head Code box in the Site Publishing Settings page...

<style>
#navmenu_menu0 ul ul li a,#navmenu_menu0 ul li.active li a,#navmenu_menu0 ul li:hover ul li a,#navmenu_menu0 ul li.hover ul li a {background:rgba(255,0,0,0.5)}
</style>

The background color is set using this...

rgba(255,0,0,0.5)

... where the first three are the RGB color numbers and the last one is the opacity which can be varied from zero to 1. The example above will give a red background with 50% opacity.

Set a suitable background color in the widget settings as a fallback for ancient browsers that don't support opacity.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Robert.tilly 8 years ago
Thanks

:-)
User: Ryan M. 3 years ago
Hi Roddy,

Thanks this code still works well today. Do you have a similar code which makes the hover over background stay transparent too? At the moment the background is transparent in the drop down menus but turns to white on hover.

Thanks if you can help :)

Cheers,
Ryan
User: Ryan M. 3 years ago
Hi Roddy,

I have just noticed the hamburger menu also has solid colour fill rather than transparent. Do you have a code for this one as well?

Cheers,
Ryan
User: Ryan M. 3 years ago
Hi again, This seems to work well :D

*Note I've used my own transparency colour, which can e changed by editing the rgba(95,15,64,0.25) part. The last number 0.25 is the transparency.


<!-- Makes Navigation Drop Down Menus Background Transparent -->
<style>
#navmenu_menu0 ul ul li a,#navmenu_menu0 ul li.active li a,#navmenu_menu0 ul li:hover ul li a,#navmenu_menu0 ul li.hover ul li a {background:rgba(95,15,64,0.25)}
</style>

<!-- Makes Hamburger Menus Background Transparent -->
<style>
.slicknav_menubar>div:first-child{width:100%}.slicknav_nav{background-color:rgba(95,15,64,0.25)}
</style>


Hope this helps someone :D


Cheers,
Ryan


Post Reply
You must login or signup to post.