[Resolved] Header element – resizing breaks layout

[Michael]

I’ve got custom header elements on my site, and I’ve made the font sizes relative (em) and the distancing from top and bottom relative (% not pixels) but if I resize my browser, the title part goes over the main body and the identity text doesn’t seem to change position relative to the size of the browser window. Is there a better way to do this?

Obviously beyond a certain size it will switch to mobile view, but above that it starts looking screwy until it’s at 100$

Any help, as always, gratefully received.

[David]

Hi there,

the % padding is the issue.
To explain – when you have the Merged Header enabled in your Header Element, it wraps the Site Nav / Site Header in a header-wrap container. This is absolutely positioned so it can sit in front of the content that comes after it ie. the page-hero.
To stop the header-wrap from overlapping the page-hero content, then the page-hero has to have Top Padding equal to the height of the header-wrap or the two contents will overlap. And using % top padding is going to be headache to ensure that is the case at all sizes without their being a huge amount of padding on large screens.

Options:

a) use a fixed padding PX value.
b) add the Site Title and Description to the Page Hero. This topic explains how to create shortcodes for them that can be used in a header element:

https://generatepress.com/forums/topic/page-hero-template-tags-tagline/#post-1321793

[Michael]

Thanks David, that explains things perfectly. The site title and description are fetched in via tags, I’ll try the fixed padding PX value and experiment there.

[David]

Glad to be of help!

[Author]

Posts