Custom header menu on desktop upon scroll

Hi there,

How do I set up the header menu element to change upon scroll to be sticky and to have a different style? The styling I’m sure is simple just through the element section, but how do I get that sticky menu to kick in upon the user scrolling down?

We can make the menu sticky through Appearance > Customize > Layout > Sticky Navigation and set the dropdown to "On".

Can you specify how you want it to look like? Perhaps a mockup image?

Now the logo and text is white so it can be read on the background image, but once it scrolls down, I'd like the navigation to have a white background, black text, black logo.

Thanks Elvin!

As for the sticky navigation colors, try this CSS:

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

nav#sticky-navigation .main-nav li a {
	color: black;
}

As for the logo, you set separate sticky logo navigation on Appearance > Customize > Layout > Sticky Navigation. You should see a setting for the logo there.

Thanks Elvin that works! The only issue I'm having is the sub menu changed color too, I'd like that to stay the same as it is before the sticky menu kicks in.

Thanks Elvin that works! The only issue I’m having is the sub menu changed color too, I’d like that to stay the same as it is before the sticky menu kicks in.

IF we keep the submenu transparent w/ white text color, it'll be an issue if the submenu is opened when you are on a section of the site that is on white background.

Here's what I suggest:

We can try custom styling the submenu items as well.

Try this CSS:

nav#sticky-navigation ul.submenu {
	background-color: white;
}

nav#sticky-navigation .main-nav ul.submenu li a {
	color: black;
}

or if you want to keep the current background and simply want to change the font color of submenu items back to white, try this CSS:

nav#sticky-navigation .main-nav ul.submenu li a {
	color: white;
}

Hi Elvin,

Yes this is what I want to do. Keep the current background on the submenu, but just change the submenu items font back to white.
---
or if you want to keep the current background and simply want to change the font color of submenu items back to white, try this CSS:

nav#sticky-navigation .main-nav ul.submenu li a {
color: white;
}
---
I have tried this code above and the submenu font is staying black. I have cache off :)

Thanks!!

Hi Mike,

The sub-menu-items are white currently, could you confirm this is what you are trying to achieve?
https://www.screencast.com/t/gRzqkX7Ea

Let me know :)

Hi Ying,

Thanks for your response! The sub menu items turn to black once you scroll down, I'd like to keep the font white.

Here you can see that they turn black and it's hard to see

https://www.dropbox.com/s/hp0sfeuvf718x2w/screen%20shot%202021-05-17%20at%206.24.57%20pm.png?dl=0

Thank you!

Ah I see. There's a missing character on the CSS selector I've provided. My bad.

In nav#sticky-navigation .main-nav ul.submenu li a, the ul.submenu part should've been ul.sub-menu.

Try this instead.

nav#sticky-navigation .main-nav ul.sub-menu li a {
	color: white;
}

Great, it's working perfectly now! Thanks Elvin, I appreciate all your help. And you as well Ying.

Best,

Mike

Good to know! Glad you got it sorted. No problem. :D