[Resolved] A few issues with the page header

[Neil]

Hi,

I’ve noticed a few issues with the page header as follows;

1. The vertical centre setting does not seem do that. It’s positioned the top of the content in the centre which means that the header content seems to be closer to the bottom.

2. When viewed on mobile and with a fullscreen background image, the header content can go off the bottom of the screen not to be seen (even when scrolling down).

3. On mobile in the same situation as above, the mobile menu interferes with the header content.

Any suggestions would be greatly appreciated.

Thanks,

Neil.

[Leo]

Hi Neil,

Any chance you can provide a link to your site? Thanks!

[Neil]

Hi Leo,

Sure, it’s on the live version of the site right now too…. http://www.fickaskap.com

Thanks,

Neil.

[Leo]

1. Not quite sure what you mean. It looks center to me? https://s23.postimg.org/pl62evft7/pageheadercenter.png

2. Hmm I think I can see all the content? http://www.screencast.com/t/qcW0M6dU
Keep in mind that background images are not responsive by nature. One option is to switch out the background image specifically for mobile.

3. By interfering do you mean pushing the content down like the video above?

Sorry if I’m misunderstanding something. Let me know 🙂

[Neil]

Hi Leo,

It will appear more centred on wider screen resolutions. Try it on a tablet for example and it definitely is not centred

My 2nd Monitor is much ‘squarer’ and it looks like this https://snag.gy/hRm1Vo.jpg

I have taken a screenshot from my phone what happens when I click on the menu.
https://goo.gl/photos/BkMp3SsYZ74YbNDq8

[Tom]

It actually is centered, it’s just taking the header into account. You can check the Place content behind header option if you want the content to ignore the header: https://docs.generatepress.com/article/merging-the-page-header-site-header/

As for the second issue, can you try this CSS?:

@media (max-width: 768px) {
    .main-navigation.toggled .main-nav>ul {
        position: absolute;
        width: 100%;
        z-index: 9999;
        background: #222;
    }
}

[Neil]

Hi Tom,

That’s a massive improvement for both items, thanks.

I haven’t tested on my actual mobile phone yet but in the mobile view of the customise page the actual menu icon is behind the header text too. I’ve not seen this on my phone so I suspect it’s not an issue in reality. I’ll have a look and let you know.

Thanks for your help.

Neil.

[Tom]

That’s one of the drawbacks of placing your content “behind” the header I’m afraid, which is why it’s something you have to turn on.

You could try adjusting the top/bottom spacing.

[Neil]

I’ve played around with a few settings and what I really need to be able to do is reduce the font size for the page header on mobile only. Is there any CSS that would allow me to do just that?

[Neil]

Hi Again, I’ve found the settings for adjusting the font size for headings based on full-screen or mobile. This has helped a lot.

However, I could really do with some way of either applying the “vertically center content” and “Place content behind header” only when not on mobile or having different top padding for full screen vs mobile.

Thanks,

Neil.

[Neil]

Hi Tom,

I’ve worked something out 🙂

@media (min-width: 768px) {
	.generate-inside-combined-content {
		padding-top: 100px;
	}
}

Seems to do the trick.

[Tom]

Perfect 🙂

[Author]

Posts