[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?

  • This topic has 22 replies, 3 voices, and was last updated 1 month ago by Fernando.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #2273694
    Marcel

    I created a merge header and shifted the site logo and header down so the logo is partially “flying” over the below content. So far so perfect, however I can’t find a way to decrease the space above the logo+header with let’s say 20 of 30 px so it moves up to the top menu bar?

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

    The website is in development (release next week) but I whitelisted on URL so you can check.

    Kind regards,

    Marcel.

    #2273987
    Ying
    Staff
    Customer Support

    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.

    #2273994
    Marcel

    Hi Yin,

    thanks!

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

    #2274043
    Ying
    Staff
    Customer Support

    Try add this CSS:

    nav#site-navigation {
        position: relative;
    }
    #2274196
    Marcel

    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?

    #2274288
    Fernando
    Customer Support

    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!

    #2282264
    Marcel

    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?

    #2282272
    Fernando
    Customer Support

    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.

    #2282277
    Marcel

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

    #2282279
    Fernando
    Customer Support

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

    #2282281
    Marcel

    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;
    }
    #2282282
    Marcel

    or this one?

    div .site-logo {
    padding-right: 0px!important;
    padding-top: 70px!important;	
    }
    #2282289
    Fernando
    Customer Support

    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.

    #2282345
    Marcel

    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

    #2282897
    Ying
    Staff
    Customer Support

    Try add this CSS:

    nav#mobile-header .site-logo.mobile-header-logo {
        display: block;
    }
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.