[Support request] Creating Page Element Header

[Mike]

Hello, I’m not sure I am doing this properly. I want it to show on the front page.

I’m using a front page post as my main page, so I set up the display rules as follows

But when I try changing the text parameters for the header element, nothing is changing, which makes me think it is not set up properly

View post on imgur.com

Thanks

[Mike]

Hmm, I changed the display rule to:

Show and I highlighted the specific page on the front page

And did exclusions: None

[Leo]

Hi there,

If you want to the header element to show on the front page only, then simple select Front Page in the display rule without any exclusions.

If this still doesn’t work, do you have any other header elements that might be causing conflicts in display rules?
https://docs.generatepress.com/article/conflicting-display-rules/

If not, then can you take a screenshot of the Page Hero tab of that header element?

Let me know 🙂

[Mike]

I changed the inclusion to the page that i want it to show up

View post on imgur.com

[Leo]

Can you try Front page as suggested above?
https://www.screencast.com/t/RHgTGZVqufA

[Mike]

Thanks, got it to work! Any tips on how to make the image fit better aside from playing with the padding %?

[David]

Hi there,

remove this CSS:

.page-hero {
    background-size: contain;
}

then add this CSS to lock the hero height to around 400px ( your text and button is around 100px tall on desktop ):

@media (min-width: 1100px) {
    .page-hero {
        padding-top: 150px;
        padding-bottom: 150px;
    }
}

The % padding you have in the header element will now apply when the image spans the full browser width and might need a little tweaking

[Mike]

Awesome! Thank you!
I have a question. I am using the colors section to change the color of the primary navigation and the footer. Both of them are set to #1e72bd
However, the top menu navigation color looks different for some reason, not sure where to adjust it since I think I should be setting the same color for both already

[David]

The Navigation is set to #1e72bd. This is set in Customizer > Colors > Primary Navigation.
This however can be overwritten using a Header Element > Site Header > Navigation colors – but this is generally only available if the header element is set to merge with content.

[Author]

Posts