[Support request] CSS class (or nav adjustment) for Header Elements on secondary nav

[Tyler]

I have an issue where when making a merged header with light text, the color picker doesn’t set colors on the secondary nav.

I assume this is intended, but I was hoping to add a class to the custom element and then write some CSS for it.

Unfortunately the only targeted solution I’ve found is dumping the CSS in the header content box or using .page-id-xx .secondary-nav

Both feel a bit messy as I’d love to have this all in my stylesheet. Any tips/suggestions that I’m missing?

Thank you!

[David]

Hi there,

when the Header Element is set to merged, the Site Header, navigation elements, top bar etc. are wrapped in the header-wrap. So you can target the secondary nav for merged headers like so:

.header-wrap .secondary-navigation

Let me know if you need any specific CSS help.

[Tyler]

Thanks, David!

The trouble is that I have a wrapped light version and dark version so that gets me a bit closer but not quite close enough.

An input for additional CSS class to the Header Element would be my feature request 🙂

EDIT: Thought I solved it with the “element classes” but that only appends to the page hero.

[David]

Hmmm…. are there any body class differences between the two types of header? eg. One is for Posts and the other Pages?

[Tyler]

Nothing else really since both are used on pages.

I think in the interim, the best solution is inline CSS within the “hero” section of the Element.

[Tom]

Suggestion for a CSS class for the .header-wrap element noted 🙂

[Author]

Posts