Setting page header height

Hi there,

Page Headers that are set to full height are not effected by padding as they always size to the browser. If you're trying to maintain the image ratio then you would need to remove full height and use % padding to suit.

Thank for your help David.

And if want to manage it on mobile?

I tried by replacing the original image with a new image (width 768px) and a css code like this below, but it doesnt suit well.

How can I manage full height, padding and text size on mobile?

Thank you again.

@media (max-width: 768px)
{
#page-header-X.generate-content-header {
background-image: url(urlimage768);
background-size: 100%;
background-position: center center;
}
}

Whats the problem with the CSS you tried for the mobile? Can you share a link to that page?

Here the link

https://energyclubwellness.it/energy-fit/

As you can see image and text on mobile doesn't seem properly visible.

This is gonna be tricky, as the merged header, full height and parallax all have an impact on the header. The new Header Element (which is an update and replacement to Page Headers) has options to switch off the merged header for mobile as well as control the padding separately. May require updating the headers to that to make this more manageable.

https://docs.generatepress.com/article/header-element-overview/

Let me know

Thanks David. Now I'm trying to use a new header element on this page: https://energyclubwellness.it/energy-fit/

I followed the instructions of the documentation to re-create the old page header, but now how can I customize:

1) the sticky menu and the main menu sub navigation styles for both dekstop and mobile and - this is important - only for THAT page. I had created a long CSS with the old page header and now obviously doesn't work.

2) the size of background image (or alternatively how can I replace it with a smaller one?) and of the text on mobile.

I've tried all the day but I'm a beginner and I guess I need help. What do you suggest?

I would greatly appreciate your contribution.

So lets take it a step at a time. First can you go the the Header Element > Site Header tab and for the merge with site header option set it to Desktop only.
Then i can take a look at the mobile padding options so we get that right.
Then we can look at the desktop to make it full screen.

Ok,

1) I set site header option to dekstop only
2) I modified mobile padding options and now image looks quite satisfactory

(Now on mobile I have the general header nav menu, while I would it to set a specific one for that page, light blue color)

Thank you David...and go on!

For the mobile nav colors, as you have used CSS for the sticky nav you can set them in the Customizer > Colors > Primary navigation.

Then next we're going add this class to the Element Classes in the header fullheight-hero

And this CSS:

@media (min-width: 1024px) {
    .fullheight-hero {
        min-height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }    
}

Ok, I set the CSS for the new "fullheight-hero" class.

As for the mobile nav colors, if I set them in the Customizer > Colors > Primary navigation this affects all the pages, whereas I want change ONLY THIS page.

So previously I set specific CSS for "energy fit" page header with #page-header-70 and this worked very well. Now I guess I only have to replace #page-header-70 with a new page-id to generate the same effect. Am I wrong?

Let me know how to proceed.

thank you David

OK so instead of using the pageheader ID to select the menu you can use the unique body class. For that page it is: .page-id-17 the other selectors and CSS you used remain as is.

Now all seems good, thank you David.

I suppose I have to replicate the same method for other pages I want to customize like this, right?

And two more questions:

1) I would like to set different padding for tablet as I see that the space above and below the text is not quite sufficient at the moment

2) I would like to reduce the text size of page elements on mobile (but not on tablet), how can I do?

I wouldn't want to abuse of your kindness and patience, your support turned out to be very valuable.

thank you

Thats correct.
I made a change to the code here
That should ensure the text remains centered no matter what the screen size. So no need to mess with padding.

To adjust the typography, as long as you're not using Elementor to set the font sizes can be done with this CSS:

@media (max-width: 768px) {
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 26px;
    }
    h3 {
        font-size: 20px;
    }
    p {
        font-size: 16px;
    }
}

Very well, now all seems ok.

I'm setting this thread as resolved.

Thank you for help David!