Creating Page Element Header

Hmm, I changed the display rule to:

Show and I highlighted the specific page on the front page

And did exclusions: None

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 :)

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

https://imgur.com/a/v5JycZY

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

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

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

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

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.