Archived topic
Header Elements, show full screen on start page, small image on all other pages
10 replies · Started by Kurt on January 29, 2022
I would like to do the following with the header element:
Show a full image with header and navigation on the start page, and show a small image in the header and navigation on all other pages.
I have created two elements.
Element for the start page: On the start page show a picture on Full Screen (is activated) and Site Header is set to Merge.
Display rules are set to Location Start Page, Exclude Page, all Pages.
Second element for the other pages: no full screen, Site Hero set to merge.
Display rules Location: Page, All Pages, Exclude: Start Page
The header is displayed correctly, but the menu does not work, a white page is displayed when clicking. Only when clicking on Start is the image displayed correctly.
The mobile menu does not work either.
If I set Location to Page and select a page that is not being used, I get my default header (without picture) and the menu works again.
What can I do?
Hi there,
can you enable the second element so i can see the issue ?
Hello David,
Yes, it is now. I had just tried a few things.
You have this HTML in your Header Element:
<!---- Kommentar>
Change it to:
<!--Kommentar-->
Hello David,
many thanks.
It works. That's incredible. A little something and I tried everything possible for several hours.
I thought it was a comment, I don't have to be specific.
Another question:
If you click on my home page, you will see my normal home page at the bottom. It consists of the image, some text and a button.
Is it possible to integrate this page directly into the header element, so that this image with the text appears like the current additional image?
Or is this a new topic?
Yeah the missing -- cause a lot or problems.
Reference article for the correct syntax:
https://www.w3schools.com/tags/tag_comment.asp
If you create a Header Element, and ONLY set the Site Header to Merged and DO NOT add anything to the Hero, then it will merge the site header with the content of your page.
Hello David,
unfortunately your instructions did not work for me with my start page. Maybe it is because of the content of this page.
So I created a new page called Start-Test and added it to the menu. That worked, the header is transparent.
What is not displayed now is the mobile menu when this page is active. It is there in the white strip above, but you can't see it. With all the other page it is OK.
Supplement:
If you move the image up, the mobile menu appears.
For that page you can set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
That will:
a) Remove the themes padding which is adding the whte gap at the top of the page.
b) Make the page full width, so you can then build you entire page using Blocks.
Hello David,
thank you very much. My customizer has different options than shown in the link, but I got it working.
The Content Container is in the Post Editor :)
Glad to hear you found a solution
