[Support request] How to decrease header hight and resolve layout shift?

Home Forums Support [Support request] How to decrease header hight and resolve layout shift?

Home Forums Support How to decrease header hight and resolve layout shift?

Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #2282975
    Marcel

    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;
    }
    #2282995
    Ying
    Staff
    Customer Support

    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.

    #2283005
    Marcel

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

    #2283076
    Fernando
    Customer Support

    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!

    #2283252
    Marcel

    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?

    #2283264
    Fernando
    Customer Support

    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.

    #2283267
    Marcel

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

    #2283268
    Fernando
    Customer Support

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

Viewing 8 posts - 16 through 23 (of 23 total)
  • You must be logged in to reply to this topic.