Archived topic
Problems with the page header using GP Premium 1.7 beta rc3
22 replies · Started by Lucas on August 11, 2018
Hello
I'm using the new header elements and so far I'm loving it. I'm testing now in a single archive term. However, I have a couple of problems:
- I've selected to merge and the content is pulled behind the header. Even setting an offset in "Offset site heading height" doesn't seem to make any noticeable change.
- The width of the image is contained, even if I've set everything up in the page hero to "Full width" and the main header of the site is full width. How can I achieve a full width header?
- I'm using Polylang, but the header image is only showing up in 2 translations out of 4! My site is translated into Galician, Spanish, Portuguese and English. The Galician language (which is the main language in Polylang) shows up ok, and so the Spanish for I don't know why reason, but English and Portuguese languages have no background image (while the rest of the header appears to work fine).
The page in question is this one:
https://lucasreiramos.com/gl/arquivos/project-type/traballos/jazz
Thank you!
Hi there,
It doesn't look like the main header of the site is full width from the code.
You've set it to full width here?
https://docs.generatepress.com/article/header-layout/
Hi Leo, thank you for your reply.
Header was set up to full width, whereas inner header was set up to contained. The result with this is the desired one with the site header:

With these settings the logo is aligned with the site content in the main page as desired:

However, if I put both values to full width, the logo is offset.

With either settings, and having these settings in the custom header:


the result is this one:

I think every setting should be in place, am I missing something?
OK, for some reason the screenshots pasted in dropbox don't show up. I'll post the folder of screenshots as a link
https://www.dropbox.com/sh/bi1udkijea12e8n/AAAAkfgYBQzTwSDQrSyK0Zqka?dl=0
Link to main site header: works as intended:
https://lucasreiramos.com/gl/ola
Link to custom header, doesn't work as intended:
https://lucasreiramos.com/gl/arquivos/project-type/traballos/jazz
Link to this custom header in another language, image doesn't show up at all
https://lucasreiramos.com/pt/arquivos/project-type/trabalhos/jazz-pt
Hi there,
Are you using the new GPP 1.7 Elements? The HTML markup looks like you're using the old Page Header.
However, the wrap (making it merge) is from Elements.
Are you using the two together (old Page Headers, new Elements)?
You're right, I was using both! That's because I had some previous headers and I was just trying with one without disabling the others.
However, disabling them just made all the header images disappear!
Fiddling around, I've discovered that the image only shows up if there's HTML present, and only in the section that HTML takes place. I've added some text and while there's text there's background image in the vertical dimension (it takes up all the page horizontally as expected).
Here's the screenshot
https://www.dropbox.com/s/hu6saioocypfchr/Captura%20de%20ecr%C3%A3%202018-08-12%2C%20%C3%A0s%2013.41.06.png?dl=0
(sorry about the text being almost illegible)
and here's the page:
https://lucasreiramos.com/gl/arquivos/project-type/traballos/jazz
That makes me wonder wether this should be like this or not. A possible workaround is just to create a block div of whatever pixels height I need, but somehow I think that's not the way it was intended to be, or is it?
Good news is that now it's consistent across the languages, and also takes full width, so problems 2 and 3 are crossed out!
Interesting - the merge option only works when content is added? Or the background image only appears when text is added?
The second one is standard behavior - text needs to exist in order for the HTML to print, the HTML needs to exist in order for the background image to attach to it.
Instead of text, you can use an HTML comment: <!-- background image -->
The background text only appears when text is added, and only in the vertical span that that text occupies. There is already a comment, which is this one:
<!-- jazz header -->
If I put just that, the background image is transparent, like this
https://www.dropbox.com/s/6dbgl3o28ityoh7/Captura%20de%20ecr%C3%A3%202018-08-12%2C%20%C3%A0s%2019.36.56.png?dl=0
If I put some text, like:
<!-- jazz header -->
This is sample text
this is the result
https://www.dropbox.com/s/l4l2hemtz9pubgb/Captura%20de%20ecr%C3%A3%202018-08-12%2C%20%C3%A0s%2019.36.22.png?dl=0
with the added side effect, that I didn't notice before, that the selected menu item "Traballos" is displaced.
Have you tried adding top and bottom padding to the element?
An element is only as tall as its content. So if an element doesn't have any content or padding, it won't have any height.
OK, I think I’ve made it to work, however I still have to better understand how it works. The main logo is now outside the alternative header, is that right? So with the merge option there are, so to speak, two headers: one with the default logo (unless I choose to change it) but with without the default background image and another one which is the alternative and which I have to make it match in heigth with the padding and offset settings, is that right?
I’m away from the computer to make further adjustments, but I’ll get back here to clarify my quesions further.
That sounds right to me :)
Ok, I think I understood it more or less, but as now there are two headers, some problems arise. I've configured the main header to be full screen. My menu bar is showing at the bottom, so now it's in the middle. The site branding is on top and I would like to be below. Is there a way to accomplish this without going the Additional CSS way?
I'm not sure I understand. Should I be looking at a specific page?