Sticky menu - colours

mrmzalewski · October 2021

Hi there

I am trying to change colours of the sticky menu but unsure how.

I would like to control colours of the transparent as well sticky menu (top when you scroll down).

Right now the link text is in white so when i scroll down, the text isnt visible.

Normal menu when youre at the top of the page:

sticky menu when scrolling down:

Phil · October 2021

Hello,

Please, go to Betheme -> Theme options -> Header & Subheader -> Header, scroll down to the Sticky header options, and change the style to White.

Thanks

mrmzalewski · October 2021

@phicks12 thanks a lot

is there a way of editing the white sticky style? i would like to change the sticky header background colour and active link + links as well. I tried doing this on header builder plug it but it does not use the same styling ("line below link") which i really like.

Phil · October 2021

You can achieve that by writing a CSS code, and placing it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Please let me know if you need help with writing it, but I will need a link to your website.

Thanks

mrmzalewski · October 2021

https://forum.muffingroup.com/betheme/discussion/comment/205880#Comment_205880

hi there

that would be very helpful, thanks, demo page here: https://interi.co.uk/home/

i would like to be able to change colours of the following:

background
active link
link
hove over link

Also, additional question; is there a way to apply the "line below link" in the header builder (i do like how easy it is to use)?

thank you for your help!

Phil · October 2021

Please, try the following code:

#Top_bar.is-sticky{
   background-color: #213705!important;
}
#Top_bar.is-sticky .menu > li.current-menu-item > a{
   color: #000!important; //active page menu item color
}
#Top_bar.is-sticky .menu > li > a{
   color: #ff00ff!important; //menu item
}
#Top_bar.is-sticky .menu > li > a:hover{
   color: #000!important; //menu item hover color
}
#Top_bar.is-sticky .menu > li > a:after{
   background-color: #000!important; //underline color
}

Thanks

Sticky menu - colours

Comments