Archived topic
Page header in single post not full width
12 replies · Started by Juha on January 8, 2018
Hi!
This is the problem: I have my Page Header set to full width, but in single post view it gets contained to the blog container and isn't attached to the menu.
You can see the problem here:
http://www.kajaaninharrastajateatteri.fi/uutiset/hiekkahentusten-valintatilaisuus-generaattorilla-tammikuussa/
It worked fine before I updated GeneratePress. This is what my custom CSS looks like.
.category .page-header {
display: none !important;
}
.main-navigation ul ul {
width: 100%;
}
.site-header {
display: none;
}
.page-header-image.grid-container {
max-width: 100%;
margin-top: 0;
}
.page-header-image img {
width: 100%;
}
.separate-containers .page-header-image,
.separate-containers .page-header-image-single {
margin-top: 0;
}What do?
Hi there,
Hmm you shouldn't need custom CSS to make it full width as there are full width options in page header:
https://docs.generatepress.com/article/page-header-content/#container
Just make sure you have content added. HTML comment will work: <!--This is a comment-->
I understand the options, but there was a reason I had to use CSS when I built the site but now I can't remember what it was. Inserting the HTML comment into the box made the Header Image disappear from every page, even the front page. Made it actually look a bit better, but I'd still want the image to show across the site :/
Is add background image turned on? https://docs.generatepress.com/article/page-header-content/#add-background-image
Yes, add background image is on.
Just to double check, are you wanting to add this image:
http://www.kajaaninharrastajateatteri.fi/wp-content/uploads/2017/10/Beowulf-Grendel-headerimage-2-PNG.png
Full width below the navigation on all single posts?
Yep, that's the one.
Might be easier to add it in the after header hook as a static image:
http://demo.generatepress.com/hook-locations/
Then target it to single post only:
https://docs.generatepress.com/article/using-hooks-conditional-tags/#single-posts
Then the image would actually be responsive as well :)
Allright, thanks :) I need to take a look at it, I've never used hooks before.
Aw man. I don't know how to do this. I think I need step by step instructions on how to do this :D
Actually I was over thinking this.
Try adding a static image as the page header content:
<img src="http://www.kajaaninharrastajateatteri.fi/wp-content/uploads/2017/10/Beowulf-Grendel-headerimage-2-PNG.png">
It works! Thank you so much! :)
No problem :)
