Viewing transparent background colour for navigation dropdowns????

transparent background colour for navigation dropdowns????



User: Chris T. 5 years ago
as title ,)

i cant get rid of the background

Bildschirmfoto 2018-09-11 um 17.29.25.png
User: Roddy 5 years ago
You would need to add some styles to change the drop down background color from a hex color number to rgba.

Try pasting this into the head code box ...

<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(0,0,0,0.3) !important}
</style>

The last number in this string - rgba(0,0,0,0.3) - is the opacity. Set it to zero if you don't want any background at all.

-------------------------------
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: Chris T. 5 years ago
hi roddy. thank you.. i wanna try. what is the head code box please????


thanks, bye
User: Chris T. 5 years ago
never mind , i found it!!
User: Chris T. 5 years ago
YEAHH, that works!!)))


thank yoiu a lot
User: Roddy 5 years ago
Find out about Code Insertion and learn what code goes where.

-------------------------------
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: Chris T. 5 years ago
sorry Roddy. it seems it only works for the homepage.. what could i have done wrong please?

best. °!
User: Roddy 5 years ago
Did you paste the code into the Head Code box in the Site Publishing Settings page so that it will be applied to all pages of the site?

-------------------------------
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: Chris T. 5 years ago
hi. actually yes, i think so:

Bildschirmfoto 2018-09-27 um 08.17.51.png
User: Roddy 5 years ago
Try using the !important declaration like I did in my previous example...

.slick_nav a:hover{background:transparent !important}

When we insert styles in EverWeb, we have no control over the order in which they are inserted. The code that EverWeb inserts for the navigation widget is probably inserted below you code so it overwrites it. To make your code overwrite the EverWeb code, insert the !important declaration after the property value making sure you leave a space between the value and the declaration.

-------------------------------
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: Chris T. 5 years ago
hi roddy. sorry, that whas my mistake. i thought this code was for the main headcode box (like in the picture)
the code you gave me before in your post was for the page headcode box ...not the main headcodebox..


i just got confused. now i just copy past the code in all the other page headcode boxes and it works like charm.. THANKS

Bye !)
User: Ryan M. 3 years ago
Hi, This seems to work well, I've added some code which also works with hamburger menu :D

*Note I've used my own transparency colour, which can be 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

Last edit 3 years ago


Post Reply
You must login or signup to post.