[Resolved] I want sticky menu to have opaque background colour but top menu transparent

[Mel]

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?

[Fernando]

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

[Mel]

I added the link and login to view (password protected) in the Private Info Field.

[Fernando]

Can you try adding this through Appearance > Customize > Additional CSS?:

nav#sticky-navigation {
    background-color: #Fff;
}

[Mel]

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?

[Fernando]

I see. Try this:

nav#sticky-navigation ul.sub-menu {
    background-color: #Fff;
}

[Mel]

Now the sticky submenu items have an opaque background but the sticky main menu is transparent again.

[Fernando]

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;
}

[Mel]

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?

[Fernando]

Can you open a new topic regarding that? Please share the link to the page in question there as well.

[Mel]

OK thanks.

[Fernando]

You’re welcome and thank you as well!

[Author]

Posts