Archived topic
I want sticky menu to have opaque background colour but top menu transparent
11 replies · Started by Mel on March 30, 2023
Hi, I am using the MyPet Sample Site template. I want to keep the top menu transparent but the sticky menu to have an opaque background colour. Is that possible and if yes how to I set it up?
Hi Mel,
For reference, can you provide the link to the site in question?
You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
I added the link and login to view (password protected) in the Private Info Field.
Can you try adding this through Appearance > Customize > Additional CSS?:
nav#sticky-navigation {
background-color: #Fff;
}
That's great, it worked! However, the sticky menu submenu items still have a transparent background. How can I make them have an opaque background as well?
I see. Try this:
nav#sticky-navigation ul.sub-menu {
background-color: #Fff;
}
Now the sticky submenu items have an opaque background but the sticky main menu is transparent again.
Oh. Don't remove the previous code.
The code you should have right now is this:
nav#sticky-navigation {
background-color: #Fff;
}
nav#sticky-navigation ul.sub-menu {
background-color: #Fff;
}
That works now. Thanks so much for your help.
I have an unrelated question about the spacing above and below the main menu for the same site. Can I ask you this here or do I need to open a new topic?
Can you open a new topic regarding that? Please share the link to the page in question there as well.
OK thanks.
You're welcome and thank you as well!