[Support request] How do you change the background color on the sticky navigation on scroll

[Brandon]

Hi I am new to GeneratePress. I would like to change the background color of the sticky navigation. What I mean is that as you scroll down the navigation background is transparent and the navigation text is white. Since most of the page content is white the navigation is invisible. Any help would be greatly appreciated.

[Leo]

Hi Brandon,

Can you take a look at the documentation and video here and see if this solution would work for you?
https://docs.generatepress.com/article/transparent-header-and-navigation/

If not can you link me to the page in question so I can provide the best solution possible?

Let me know 🙂

[Brandon]

That didn’t work. I followed along and made the edits per the videos instructions and the entire navigation and header is now all messed up. Now I am not sure how to fix this. The site is really just a dev site that I am playing around with to learn GeneratePress. https://h4p.2d5.myftpupload.com/ Any help that you can provide would be greatly appreciated.

[Leo]

I followed along and made the edits per the videos instructions and the entire navigation and header is now all messed up.

What exactly is messed up about it? I don’t see any obvious issues here:
https://www.screencast.com/t/AndjlebgUTiW

[Brandon]

I restored the site to previous settings and started over. Would you be able to provide more detailed instructions on how to add a background color to the navigation. I am not sure if I am explaining it correctly but what I would like to do is to when someone scrolls down a page the navigation background is transparent. Since the text in the navigation is white you cant see the navigation when you are on a section that has a white background. I only want to change the background color during that state.

[Leo]

Just to confirm, do you want the static navigation color to be transparent and the sticky navigation color to be a solid color?

If so that is exactly what this solution is for: https://docs.generatepress.com/article/transparent-header-and-navigation/

And here are two examples of what the solution achieves:
https://gpsites.co/crypto/
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

Can you implement it first so I can see what issues you are running into?

[Brandon]

Hi Leo, I watched the video and the video does not provide specific instruction as to which field we need to edit to achieve the look on this site: https://gpsites.co/crypto/. Can you please provide more specific direction. I have tried changing the colors of different fields and it just is not working.

[David]

Hi there,

it may be simpler to just add some CSS:

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

[Brandon]

Hi, Thanks. I added the css and that seemed to work. The example that Leo showed is exactly the look I was trying to achieve but the video he sent does not explain how to achieve it. Or the element module isn’t working. I am working with the Movement site template from the site library.

I would also like to change the color of menu items on hover. Currently this only works when you are at the top of the page. When you scroll down it doesn’t work.

Here’s a screenshot of the Elements screen: https://postimg.cc/Xr2tL49w

Thanks for your help.

[Brandon]

Here’s a link to the dev site: https://h4p.2d5.myftpupload.com/

[David]

Yeah, the method and effect in the video requires the Navigation as Header option which is set in Customizer > Layout > Header. Or the Nav to be above or below the header.

If you want to use any of those options, then you should be able to achieve that same effect.

[Brandon]

When I ckeck off Use Navigation as Header the logo shrinks down and is barely visible.

And the hover state of the navigation menu I added a different color to that hover state, however that only works when at the top of the page. When you scroll down and hover on an item in the navigation the hover state doesnt work. See screenshots below.
https://postimg.cc/LhPqZwDx
https://postimg.cc/Wd1bSHmL

[Fernando]

Hi Brandon,

Can you re-implement “Navigation as Header” on your site? We’ll check these issues out firsthand and see what can be done.

Normally, you would need to increase the Menu Item Height to increase the size of the logo on “Navigation as Header” setting. You can do this in Appearance > Customize > Layout > Primary Navigation. Reference: https://docs.generatepress.com/article/menu-item-height-width/

[Author]

Posts