Merge Header Site-Wide

[Nick]

Is there a way to merge the page header site-wide without having to do it on every page?

I want the background image of my header to be behind my navigation.

Or is there another way to handle this?

Thanks!
Nick

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Nick,

You can use the blog page header with a filter:
https://docs.generatepress.com/article/blog-page-header/#displaying-the-blog-page-header-elsewhere

Let me know if this helps.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Hi Nick,

Should be achievable with a small piece of CSS. Can you link me to an example page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

http://cityofswainsboro.org/admin/ (The way I want it to look)

http://cityofswainsboro.org/admin/test-page/ (the “rest” of the site)

I tried messing with the Blog Page header but it didn’t make much sense to me…

Thanks!

[Tom]

Ah ok, best way to do this:

1. In GP Hooks, add this into the Before Header hook:

<div class="header-wrap">

And this into the After Header hook:

</div><!-- .header-wrap -->

2. Apply your BG to the wrap using some CSS:

.header-wrap {
    background-image: url(http://cityofswainsboro.org/admin/wp-content/uploads/2017/05/colorkit-bg.jpg);
    background-repeat: no-repeat;
}

Then just remove the background color from the header in the Customizer and you should be good to go.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

This (Reply ##313979) did the trick! Thanks!

Nick

[Tom]

You’re welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts