[Resolved] Adding CSS to Header Element

[Max]

Hello,
I need two different styled header navigation. One for front page and another for all other pages.
I created 2 different Elements (type header). But can not figure out how to add different styling for them (there no field to add css class).

[Max]

So far I find out one of the methods to achieve this, is to use pseudo-classes:

body:not(.home) .main-navigation{
/*my styling here*/
}

[Fernando]

Hi Sergly,

You can select specific Pages to include and exclude in the Display Rules of an Element.

If you’re adding specific CSS, you can indeed use pseudo classes.

Kindly let us know if further assistance is needed regarding this. 🙂

[Max]

Yes, we can definitely do custom CSS using pseudo classes, but it’s not very convenient (it’s overloading the system, not kind of clean code like BEM methodology).
Just curious why do not add Element Classes Field for Header Element like other elements have, for example:

Thank you.

[Fernando]

Good point. You may also just add a class there instead of using pseudo classes. 🙂

[Max]

Fernando, no you can not. Actually, it’s what this topic is about.

Element Header does not have this field:

Page Hero has, but we speaking about Header navigation.

[David]

Hi there,

if you need to custom style the navigation then then body_class method you used here is the way to go:

https://generatepress.com/forums/topic/adding-css-to-header-element/#post-2195346

[Max]

Got it, Thank you, Fernando and David.

[David]

You’re welcome

[Author]

Posts