[Support request] Kopfbereich / Pagehero class

[Jochen]

Hey,

I have two different Headers. One in a light version and another in dark.
I gave one of them an element class „menu-light“ which is not added to the header.

What can I do here? I don’t want to change to block elements.

Best regards
J

[Ying]

Hi Jochen,

I don’t think I understand your question.

Can you share more details and links?

[Jochen]

Hey Ying,

with the added class „menu-light“ I can build the submenu in a light version.
I need the class to control the css.
Here is a screenshot:
https://lorenzundfuchs.de/wp-content/uploads/2023/01/Bildschirm­foto-2023-01-29-um-14.31.53.png

[David]

Hi there,

what are the Display Rules you’re using to set which Header Element is displayed?
As we would need to add a CSS class to the body to make that work.

[Jochen]

Hey David,

is this what you need?
https://lorenzundfuchs.de/wp-content/uploads/2023/01/Bildschirm­foto-2023-01-29-um-14.54.07.png

[Ying]

So the display rule is set as below?

1. Front page
2. Blog
3. Post > all posts
4. Page > impressum

Can you link us to the impressum page?

[Jochen]

Hey,

the project is wip and password protected.
I send the info via private information.

[David]

Try adding this PHP Snippet to your site:

add_filter( 'body_class', function( $classes ) {
    global $generate_elements;
    foreach ( $generate_elements as $element => $data ) {
        $element_title = 'gp-elem-' . strtolower(str_replace(' ', '-', get_the_title( $data['id'] ) ));
        $classes[] = $element_title;
    }
    return $classes;
});

In the body tag it will print a class like so: gp-elem-{elements-title} for each element on the page.
For example i create an element titled: menu-light
Then it will print a class: gp-elem-menu-light that you can use in your CSS.

[Jochen]

Hey David,

thank you very much. It works now!

Best regards
Jochen

[David]

Glad to hear that!

[Author]

Posts