Header Builder Resizing and Overlap Issues

[patrickg]

I’m spent better part of the day building a new header that provides different experiences for desktop vs mobile. You can check out the example page here:

Aged & Ore's Duo Glass Review vs Glencairn Whisky Glass

First issue is that my header image and nav bar are overlapping blog featured images by 50% or more. I implemented some code to fix the issue on mobile but I can’t figure it out for desktop.

Ideally I’d like the image section of the header to be a fixed height (fire in barrels image) with my logo centered both horizontally and vertically. I can’t figure out the combination settings to make this happen.

Any advice is appreciated. Thanks!

[ruenel]

Hello There,

Thanks for writing in!

Please edit your header and in your bar settings please add a fixed height. At the moment, you are using this: calc(100vh - 575px) which is not fixed. And to display the logo at the center, please set the “Flex Layout” as center, center as shown below:

Hope this helps.

[patrickg]

Thanks. I think that helped fix the first issue.

Any recommendations on how to adjust so that the header is no longer overlapping my blog content below?

[paul.r]

Hi,

I can see you have added a fixed height to your header which is causing the issue.

Please set it to auto

header.x-masthead {
     height:auto;
}

Hope that helps

[patrickg]

That fixed everything for desktop browsers. But it now causes my mobile nav to overlap the images instead. The previous fixed setting had corrected mobile. Is there a way to have 2 setttings but have one for mobile and one for desktop?

[ruenel]

Hello There,

If the custom css is meant to fix for your mobile nav, you can simply update the code and use this instead:

@media(max-width: 767px){
  header.x-masthead {
     height: 4.35em;
  }
}

Please let us know how it goes.

[patrickg]

That worked! thank you!!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!