[Support request] How can I change the menu bar sticky navigation background color?

[Jonny]

Hello,

How can I change the menu bar sticky navigation background color?

Currently, I don’t have a background color set for my menu, and I don’t have sticky navigation on my menu enabled, however, I would like to enable sticky navigation, hide it when scrolling down, and have it appear with a background color when scrolling up.

I would also like my logo to appear in the sticky navigation menu.

[Fernando]

Hi Jonny,

The background color of the Sticky Nav can be modified through Appearance > Customize > Colors > Primary Navigation. However, changing so would change the color of your default primary navigation as well. If you would like to modify its color independently, you may try adding this CSS in Appearance > Customize > Additional CSS:

.navigation-stick.is_stuck {
    background-color:rgb(100,0,0);
}

Kindly modify rgb(100,0,0); to your preferred color value.

With regards to the “Hide when scrolling down” setting, and adding a logo, this can be done through Appearance > Customize > Layout > Sticky Navigation.

Hope this clarifies. 🙂

[Jonny]

Thank you, I have followed all these steps, however, the issue I am having now is that the sticky nav is not displaying across the full width of the screen, could I please upload a screenshot.

Also, I can’t figure out how to display the stick nav on mobile too without 2 logos displaying

[Fernando]

With regards to the issue with the Sticky Nav not being full width, can you try this advice by David?: https://generatepress.com/forums/topic/sticky-header-not-full-width/#post-1940600

With regards to uploading screenshots, here is a helpful article: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

With regards to the two logos in you mobile sticky nav, to have a better understanding of the issue, may you kindly 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

Hope to hear from you soon. 🙂

[Jonny]

Ok thank you for the additional resources. Instead of attaching screenshots, you may view my site to see the issue. Thank you 🙂

[Fernando]

Thank you for sharing the link to your site.

On my end, this is what the Sticky nav looks like on Desktop: https://share.getcloudapp.com/NQuNPgXA

On mobile: https://share.getcloudapp.com/JruOJLBG

To confirm, are you still seeing two logos from your end? If so, can you try clearing your browser’s cache or try using a different browser?

Kindly let us know. 🙂

[Jonny]

Yes, still seeing two logos after trying a different browser and clearing cache.

The screenshots you sent are incorrect to how I want to customize it. I’m not sure if I need to select “use navigation as header” and remove the logo from the header settings or not.

I am having issues with the sizing of the logo I uploaded in the sticky nav settings, it’s appearing very small on desktop.

Basically want I am aiming to achieve is to have a sticky nav with the current header with the same size logo and different background color to appear when scrolling up (color I have already added in additional CSS), and for it to be full width (full width I was able to apply already)

I hope this makes sense, thanks for your help 🙂

[Fernando]

I see.

Are you using a caching/optimization plugin? Can you try disabling it temporarily.

Kindly let us know how it goes. 🙂

[Jonny]

Yes, I have tried this also.

I have played around with many settings in WP customizer, but nothing seems to work the way I am trying to customize the menu and sticky nav as described before. And even the background color I added in CSS is not appearing on sticky nav.

[Fernando]

Tackling the color first, on my end, it seems that the code to modify the color hasn’t been added. I can’t seem to locate the code.

To clarify, are you adding the code in Appearance > Customize > Additional CSS?

If it’s added, and it’s not appearing, this may be a caching/optimization related issue. Can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

Kindly let us know.

[Jonny]

Yes, added the code in additional css.

Tried #1 in the debugging tips and still no luck with the color change or the logo size.

[David]

Hi there,

i am not seeing any Customizer > Additional CSS loading on your site.
I do see the Simple CSS plugin is installed. Can you add the CSS to that ?

[Jonny]

Ok, now added the code to simple CSS, however, still not showing the color on the front end for me, do you mind checking on your end also. The color should be light green.

[David]

I see it when i disable WP Rocket on the front end ( by adding ?nowprocket query string to the end of the URL ).
Can you try clearing the WP Rocket caches ?

[Jonny]

That’s good that you can see it now. I have been clearing the WP Rocket cache every time I make changes in the customiser.

Now the issue is the sizing of the logo. Any recommendations for this?

[Author]

Posts