How to decrease header hight and resolve layout shift?

Sorry Ying, this also didn't solved it :-(

This is the current custom CSS for the header/menu, maybe you can see some error?

div .site-logo {
padding-right: 0px!important;
padding-top: 70px!important;	
}
.inside-header {
    max-height: 150px;
}
nav#site-navigation {
    position: relative;
}
nav#mobile-header .site-logo.mobile-header-logo {
    display: block;
}

Hum.. this is what I see on my end, is it what you are trying to achieve?
https://www.screencast.com/t/98sLvXxTZC
Let me know if I miss anything.

same as I see, but would like the logo and hamburger-icon and "menu" into the purple bar on the top

You’ll need to modify this code:

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

Into something like this:

@media (min-width: 769px) {
    div .site-logo {
        padding-right: 0px!important;
        padding-top: 70px!important;
        
    }
}

So it doesn’t add padding to your icon on mobile which is pushing it down.

Then, set the top and bottom padding of your Header Element to 30px on mobile.

We also have to fix your tablet view afterwards.

Hope this clarifies!

Hi Fernando, this is it! For mobile it is solved, we have a proper menu bar. Indeed for tablet it is still messy, what would you suggest to solve that?

We need to modify this again:

@media (min-width: 769px) {
    div .site-logo {
        padding-right: 0px!important;
        padding-top: 70px!important;
        
    }
}

To this:

@media (min-width: 1025px) {
    div .site-logo {
        padding-right: 0px!important;
        padding-top: 70px!important;
    }
}

Then, add this:

@media (max-width: 1024px) {
    .page-hero {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

Let us know how it goes.

This is absolutely great! Thank you all for your excellent support!

You’re welcome Marcel! Hope you have a nice day!