[Resolved] Floating Menu Color

[Mike]

Hello,
Is there an option to change the background of the floating menu to white?

Currently, it is transparent, so when you scroll down, it blends with the content.

Is it possible to make it only white when it goes down? And keep the transparent background when we don’t scroll?

Thank you

[Leo]

Hi there,

Are you setting the menu background color in the customizer to tranparent?

If so try using the custom navigation color in the header element instead:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

Then the sticky navigation colors would inherit the customizer settings as seen here:
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

[Ian]

I have studied the docs you provided. Let me provide more info.

I am not using a GP Page Header. The home page is created using Beaver Builder. I am able to use Elements to create a transparent header. And I can see what you mean bu setting those colours. The issue is when the Menu goes mobile. How would I control the Mobile Menu colours independently of the Desktop version?

[Leo]

Looks like you’ve decided to go with the off canvas panel?

That’s also a good solution.

[Mike]

Would it be possible to have two separate settings for colors? Currently it is transparent, which is what I want the menu to be.

But when you scroll down, transparent does not work well, so is there an option to adjust the color for the menu when it scrolls down? I was able to do that with the previous theme

Thanks!

[Mike]

https://tokyotravelguide.com/tokyo-districts/odaiba/ as an example

[David]

Hi there,

Try this:

1. Go to Customizer > Colors > Primary Navigation.
Change these colors to the colors you want for your sticky navigation.

2. Go to Appearance > Elements
Edit your Header Element, go to the Site Header tab, here you can enable navigation colors – set them to Transparent.

[Mike]

Thanks, I played around with the settings, but not achieving the desired result, sorry I explained a bit better here, please see the descriptiosn

View post on imgur.com

thank you

[David]

Try adding this CSS instead:

.sticky-enabled .main-navigation.is_stuck {
    background-color: #000;
}

[Mike]

Awesome! This is exactly what I wanted! Thank you!

Do you know under the same parameters, if sticky is enabled, how to change the font color of the menu text?

I like to keep it white for the transparent menu, but have a different color when sticky is enabled

[Leo]

Try this:

.sticky-enabled .main-navigation.is_stuck .main-nav ul li a {
    color: #fff;
}

[Mike]

Thank you both! It worked perfectly!

[Leo]

No problem 🙂

[Author]

Posts