Archived topic
How to create a full-screen hero header for homepage?
5 replies · Started by Johanna on December 5, 2019
So I built a new site have want to create a section with a big background image (almost fullscreen.
Here's the link to my new site: http://vietguides.org/
Basically, I added a section with a background image and I now want to make it fullscreen (increase size). How do I do this?
I've done this before for my old site: http://www.dherealmark.com but not sure how to do it now.
Hi there,
Header Elements are the best way to create a full width hero at the top of the page:
https://docs.generatepress.com/article/header-element-overview/
With Sections you would need to increase the top/bottom padding of the Section to make it taller ( same applies to the Header Element).
If you want it to display full height then edit the Section > Settings > Custom Classes field add fullheight-section
Then add this CSS:
.fullheight-section {
min-height: 100vh;
}Okay, I did exactly that with display rules set to appear on my home page, but nothing works. Am I doing something wrong?
Recording of my backend: https://drive.google.com/file/d/1XN7EW_XrS3PFBzaONwOc1_57ikdAMgeF/view
For the Home Page you must select the Front Page for your Display Rules.
Changed it up. Still, don't see it. https://drive.google.com/file/d/1U4gYrqz3TgW0BDsUhfc6LcdljOOIc4XH/view
You have a Header Element already assigned to the Front Page or the Entire site. Which contains your Google Analtyics script. You should remove this Header Element and place your GA script using a Hook Element instead.
There can only be one Header Element assigned to any give place. So fix the above then you should see your header element appear - make sure you give the Header Element some top and bottom padding as well.
