How to decrease header hight and resolve layout shift?

Hi Marcel,

You can try:
1. Add this CSS:

.inside-header {
    max-height: 200px;
}

2. Remove the offset value from the header element.

Let me know how it works.

Hi Yin,

thanks!

It looks ok however the menu is almost not clickable, that area seems also shifted/decreased

Try add this CSS:

nav#site-navigation {
    position: relative;
}

This is it! Thanks Ying.

At last can you advise in when scrolling down/up you see a shift in the logo+header compared to the header background, how to solve that?

Hi Marcel,

Try adding this CSS:

@media (min-width: 1025px) {
    .main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
        padding: 0px 20px 0px 20px;
    }
}

This CSS would make the padding of the Sticky Nav and your nav bar similar on desktop.

Hope this helps!

Hello, we're still struggling with the header height.

The site is live but the desktop header on mobile was too heigh so we switched to mobile header. Now there the header is much to heigh. What can we do to decrease that?

Hi Marcel,

Try reducing the top and bottom padding of your Header Element on mobile view. To do so, click on the mobile icon in the padding section, then modify the padding accordingly.

Kindly let us know how it goes.

Stupid me, it was there before the switch to mobile menu. I removed it there but it is still not good.

Try putting a value. For instance, if you want the top and bottom padding at zero, set it to zero on mobile.

have look, set it to 20 top 20 bottom but logo en menu is still too low. Maybe because of Yin's code:

.inside-header {
    max-height: 150px;
}

or this one?

div .site-logo {
padding-right: 0px!important;
padding-top: 70px!important;	
}

This is what I’m seeing from my end: https://share.getcloudapp.com/E0uyXxOx. The logo isn’t displayed.

Are you seeing something different? Can you clear all caching mechanisms you have if so?

Kindly let us know.

strange! in the configurator it is on and I can see it, but in a new private browser tab and not logged in it's not.

see URL with screenshot

Try add this CSS:

nav#mobile-header .site-logo.mobile-header-logo {
    display: block;
}