[Resolved] Blank space in header (and different headers)

[Mi]

Hello, I am new to Generatepress – and kind of new using the Block Editor. I am trying to redo my homepage and make it responsive. Last time I was deep into webdesign is 15 years ago and I really had my problems to understand all the things that are going on with blocks. I really feel lost in a way ^^’

My first problem is the header.
I set up a header bg and a logo within. Looks good for my desktop and my mobile, but the tablet preview shows a big blank space after the header. I think it has something to do with the margin/padding, but how can I make it look the same way on every desktop solution?
I tried to give the .site header .grid container a bg color, but this overwrites the background image as well. When I then set the bg image via additional css, it´s not fitting for smaller resolutions anymore …
How can I solve this?

Along with this – I want a different header (just switching image & logo) for different pages. But along with this I want to change at least the link colors as well. In my old design I did this via templates, but I read there are other ways for this now (elements, page heros…).
Does this work for header and colors? Or do I have to go the “template way” because of changing colors as well?
I hope you can help me.
Thank you 🙂

[David]

Hi there,

can you share a link to your site where i can see the issue ?

[Mi]

Oh, sorry, I thought it would be enough to have the link my profile 🙂
https://www.ffcorner.com/testwp/

Thank you!

[David]

Thanks 🙂

So lets deal with the white space in the header, the issue is to do with Aspect Ratio of the image not always matching that of your Site Header.

I would do this:

1. Edit the Customizer > Layout > Site Header –> Padding and set it to match the Layout > Container. Eg. 40px for desktop and 30px for mobile.

2. Then add this CSS to your site:

.site-header .inside-header {
    min-height: 440px;
}
@media(max-width: 1000px) {
    .site-header .inside-header {
        min-height: 44vw;
    }
}

What it does is set the min-height of the site header to 440px to match your background image.
When we hit 1000px wide screens we switch to ( 44vw ) 44% of ViewPort Width. Which is the aspect ratio of your background image ( 440px(h) / 1000px(w) * 100 = 44% ). Now the image should be 100% in view on all screen sizes and no white space.

[Mi]

Thank you so much, that works perfekt! 🙂

Any idea on the second question, too?

If I want different headers AND a different color css for some pages – can I set this with the element, hook oder hero features ( I have to get in this first, it´s all new to me)? Or do I have to create a template_site.php and css and load it if needed?

[David]

There are a few methods of doing this.
An alternative to using the Site Header Background image is to use the Elements module.

First there is the Header Element, which was created before Block Editing existed, so today we generally use it for:
a. Merging the Site HEader with the pages content
b. switching logos and changing site header and navigation colors

See here for info on that:

https://docs.generatepress.com/article/transparent-header-and-navigation/

Secondly you can use a Block Element – Page Hero to for that hero section:

https://docs.generatepress.com/article/block-element-page-hero/

Looking at your current design you may want to NOT add the logo or background image to the site header but include it in your Page Hero.

[Mi]

Yeah I see, I really have to take a closer look on page heroes. At the moment I don´t understand them. I don´t get what their advantage is? If I use a page hero instead of the header, I have to remove the header element, because instead of it the page hero is shown. But it will look the same.

I read that with hero pages and via featured images I can create multiple page heroes. But if I want to keep the featured images for “normal preview pictures” on the mainpage or archives? Isn´t there a conflict then?

And if i get this right, then this works only for changing the header /image. Or can I add css in the hero page as well, that can change the body colors at the same time? I havn´t found anything about it.

Is there any solution to do this without loading a different css?
Because if not – then why should I do different page heros? What is the benefit? I´m so sorry, if I´m saying something dumb, but I really dont get it. ^^’

I have to edit around 300 pages. As I said I am using templates in my old design, which I can set in the page-editor. I just had to create 10 templates and while creating a page I can load the one I need. This effects background and CSS at the same time.
I can´t see how a hero pages can do it?

[Mi]

Okay, I tried it with the header element and the hero page and get it to work this way.

I found the location rules and understand now, that I could easy set it up like this for all my needed pages. That is great and still like “doing just 10 templates” not “doing 300 different pages”.

Small beauty mistake: the menu is above the background and cuts off the graphics, I have not been able to solve it with the paddings, but for this I’m sure a way can be found. (I´m tired now, maybe I find the issue tomorrow).

Also the mobile view I do not like so well, because the background image is not really scaled down and shows only a small section. But again – I think I can solve this tomorrow.

The question remains: how do i set now different body link-colors depending on which page-hero is shown?
I think it´s not very elegant to fill up my css with 300 different pages and their special color ^^’

body.page-id-1726 a {
color: #111111;
}

I mean, it would work – but is there a way to combine it via the hero page?

[David]

Awesome – glad to hear you got that working.
So the link colors, will this apply to all links on the page or just those within the Main Content ?

[Mi]

Yeah, it´s working very good, thank you so much! 🙂

And yes, the link color should just effekt the main content. The code up there is working pretty well. I just don´t know if it would be good, to add this for every single page and make the css so big. But in the end, it would be no problem.

I just thought about a hook or filter or something if .page-hero is main-header / .second-header or something 😀

[David]

Ok if its for the links inside the main content then you could do:

1. Edit the Header Element, and in the Element Classes field add a unique class for that header eg. hero-1

2. Then we use some CSS like so;

.hero-1 + .site a {
    color: #f00;
}

This is using the + adjacent sibling combinator. So as long as the header element, which by default, is immediately before the site container then it will work.

[Mi]

Wow, that + adjacent sibling combinator is new to me. It works great! Thank you!
But I have seen, there are more links, than I expectet, so I will go with

.hero-1 + .site .entry-content a,
.hero-1 + .site .entry-meta a,
.hero-1 + .site .comment-respond a,
.hero-1 + .site .entry-summary a,
.hero-1 + .site .nav-links a
{
color: #000;
}

^^’ One last thing – can I exclude the entry-content image links from that? O:) Haven´t found a solution.

[David]

So you can try:

.hero-1 + .site .entry-content p a

Then in your content it will only target links within a paragraph.

[Mi]

This will not work, because most of the pictures are within a paragraph.

I was looking for something like an image class, so that I just can set them to a different color. 😀
But maybe it´s no problem, I think there are not so many linked images, so I will ignore them or – in urgend cases – will set the color directly with the image O:)

Thank you so much for your help! I think I would have spent a week or more trying to figure it all out without you 🙂

[David]

Check if the Images are in a <figure> element as we could add a separate CSS rule for those.
Otherwise it img in a link can be a pain..,

You’re welcome – glad to be of help!

[Author]

Posts