Archived topic
Header element - resizing breaks layout
3 replies · Started by Michael on August 25, 2021
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.
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
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.
Glad to be of help!
