Header Height

  • Frodde

    (@frodde)


    7 years, 1 month ago

    Hello!

    I would like to reduce the Astra Header Hight (mainly the white space betweeen the logo in the top row, and the menu in the second row.

    Anyone got some CSS for that?

    Would be highly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Team Brainstorm Force

    (@brainstormteam)

    7 years ago

    Hi @frodde ,

    Here is the CSS that would help you to reduce the default padding.

    .main-header-bar {
padding:0;
}

    Further, if you wish to have advanced options, then you can opt for our Astra Pro, in which you can do such things without coding. You can check out its feature from here.

    Regards,
    Deepak

    Thread Starter Frodde

    (@frodde)

    7 years ago

    HI, thanks!
    It actually didn’t work so well with your css, maybe it’s because the Header Height is huge when chosing the Astra-setting with logo on top-row and menu in second row.

    Instead I tried this, it works, to reduce the space between the logo and the menu:

    .site-logo-img img {
    margin-bottom: -42px;
    }

    I would now need to set margin-bottom different for mobile view. Would you have a tips for that?

    Best regards

    Team Brainstorm Force

    (@brainstormteam)

    7 years ago

    Hi @frodde ,

    You can you simply add the media query and set your defined margin for mobile as well.

    Like this:-

    @media only screen and (max-width: 600px) {
 .site-logo-img img {
margin-bottom: -42px;
}
}

    You can manage the width and margin according to your mobile screen.

    I am sure this will help.

    Regards,
    Deepak

    Thread Starter Frodde

    (@frodde)

    7 years ago

    Super! Thank you Deepak!

    Team Brainstorm Force

    (@brainstormteam)

    7 years ago

    Hi @frodde ,

    You are welcome! Glad that I was able help. 🙂

    Regards,
    Deepak

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Header Height’ is closed to new replies.