[Resolved] CSS styling for sticky menu – missing class in the new Elements

[Ernest]

Hello folks!

In legacy Page Headers, there is a CSS class that allowed me to add a bottom border ONLY on the merged header (.generate-combined-header).

Unless I missed it somewhere – is there another class I could use to do the same thing in Elements?

In the included URL you will see the border on .inside-navigation > and I would like to have it ONLY on the pages with merged headers.

[Leo]

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.

[Ernest]

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?

[Ernest]

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.

[Leo]

Sorry where was the border added? Below the navigation?

[Ernest]

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?

[Tom]

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

.header-wrap + .page-hero

[Ernest]

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.

[Tom]

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

.header-wrap .inside-navigation

[Ernest]

Perfect! That’s exactly what I was trying to accomplish – thank you!

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts