CSS styling for sticky menu - missing class in the new Elements

Hi there,

The new Header Element allows you to add Element Classes so you can just add a class there and target your CSS at it.

This method should be better as sometimes people don't want to add border or style to all the headers with .generate-combined-header in it.

Let me know if this helps.

Hi Leo - thanks for the quick reply. I'm not sure if I'm doing something wrong, but it doesn't seem to be working for me.

I tested ".generate-combined-header" and "generate-combined-header" in Element Classes - but it doesn't seem to be showing up. Would it make sense to have another class option within the "Site Header" tab?

Update: I see where it's showing up (my bad). However, it's located below the menu / nav divs so it doesn't allow me to add a border in the way I had it set up.

Sorry where was the border added? Below the navigation?

The legacy css was on ".generate-combined-header .inside-navigation"

I guess the question I have is - is there a selector that gets activated in the Elements in the body tag maybe ONLY when there is a merged header?

There isn't a class specifically, but you can do this:

.header-wrap + .page-hero

oh interesting! Can you tell me a little more about this implementation?

So rather than ".generate-combined-header .inside-navigation" I would use ".header-wrap + .page-hero .inside-navigation"?

Edit: Just tested that and it didn't work. I might be doing it wrong.

Ah, if you're trying to target the navigation when the header is merged, you can do this:

.header-wrap .inside-navigation

Perfect! That's exactly what I was trying to accomplish - thank you!

Awesome, glad I could help! :)