How to reduce header margins

  • Resolved mvrck

    (@mvrck)


    4 years, 11 months ago

    Hello,
    I’m looking for a way to control header margins. When I insert site logo (Theme customizing-Site identity), the margins, both upper and lower, occupy too much space on the page. I would like to have a way to define them, both for computer and mobile version.
    Could someone please provide a corresponding CSS code?
    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Superb

    (@themeeverest)

    Hi Mvrck, that’s a bit of a big feature because it needs to scale well on mobile so peoples website don’t end up being not responsive.

    I’ll happily look into adding it in the coming weeks, it’s gonna take some time however ??

    Thread Starter mvrck

    (@mvrck)

    Hi, thanks for the prompt answer ??

    I’ve put following code (found it somewhere, I’m not into coding so doing trial and error):

    @media screen and (min-width: 896px) {

/* Decrease Header Height */
.sticky-header .site-content {
    padding-top: 20px !important;
}
.site-branding,
.main-navigation {
    margin-top: -1.5em;
}

.site-header {
    padding-bottom: -0.5em;
}

/* Decrease Footer Height */
.site-footer {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

}

    margin-top: -1.5em; – this seems to control only lower margin and only on PC, not on mobile. I can’t find a way to reduce upper margin though.

    Furthermore on this topic
    https://wpexplorer-themes.com/total/docs/header-padding/
    I’ve found that those controls could be incorporated into Theme Customize menus, very handy.

    • This reply was modified 4 years, 11 months ago by mvrck.
    Theme Author Superb

    (@themeeverest)

    Thanks for the links, I’ll look take a look at them! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to reduce header margins’ is closed to new replies.