Reduce White Space Between Top Menu and Header Image

Add this to the Additional CSS in the customizer:

#masthead {
padding-bottom: 12px !important;
}

Just adjust the ??px until you get what you want. Maybe change the 12px to 8px? The smaller the number, the smaller the white space.

Good luck.

If you want to make any other changes using CSS, check out this page…
WordPress Twenty Sixteen (2016) theme modifications : Change Colors, titles, metas, sidebar, fonts, header, footer, menus etc using css.

Hi nahtee. Thanks for your reply.

I’ve currently got this in my child theme’s style.css:

#masthead {
padding-top: 0px !important;
padding-bottom: 2px !important;
}

When I change padding-bottom, it changes the gap between the header image and post title, not the space between the top menu and the header image.

Is there anything else I could try?

Can you try this?

Go to Appearance > Customize > Additional CSS and put the following CSS code

.site-header-menu, .header-image {
    margin-top: .75em;
    margin-bottom: 0;
}

.header-image {
    margin-top: .75em;
    margin-bottom: 0;
}

Please let me know if this helps.

Thanks! It looks good on desktop now.

When I look at my site on a tablet, however, there is still a lot of white space. How would I go about fixing this?

In that case you need to modify the media query block. To do that, please add the following by going to Additional CSS.

@media screen and (min-width: 44.375em){
   .site-header-menu {
       margin: 0;
   }
   .site-header {
       padding: 1em;
   }
}

920px: https://prnt.sc/gevqsn
960px: https://prnt.sc/gevr4p

Thanks for your reply.

I tried adding the code but it didn’t change anything on the tablet view (it only seemed to mess up the desktop view).

Anything else I can try?

Any chance somebody could help out?

How can I reduce the white space between top of the page to menu, and between the header image and first post title (for mobile)?

Any help would be greatly appreciated.

• This reply was modified 7 years, 1 month ago by pinion10.

Hi,
Please help me to reduce white space above & Below the page title (logo )between the top menu
Currently using below code, but worked
#masthead {
padding-top: 12px !important;
}
#masthead {
padding-bottom:1px !important;
}

I’m trying to move up the image on my 2016-themed site (www.buttkickingbbq.com). My experience with WordPress is very limited. What a bear!

Following the comments on “eliminating padding is very unhelpful”. I’m a half-step away from hiring it out. A beginner isn’t going to find the comments about editing CSS code to be comprehensible.

Any suggestions other than hop on a learning curve?

Thanks,

Bill