How to make header bar smaller – "thinner"

One thing you should not do is make changes to any of the theme’s files (including style.css). If you have to update or upgrade the theme (because of a security patch, bug fix, feature enhancement, WordPress core update, etc), then your changes will be lost. For CSS changes, I see that you have Jetpack installed, so you can use Jetpack’s Custom CSS option to add your own overriding CSS (go to Jetpack → Settings and once activated, you will have an entry under Appearance → Edit CSS).

As you’ve noted, you can clear the spacing at the top by adjusting the top padding for site-header-main. The extra space at the bottom is from the margin of the navigation menu. Try adding these two rules:

.site-header-main {
   padding-top: 1em;
   padding-bottom: 0em;
}

#menu-menu {
   margin-bottom: 22px;
}

The value for margin-bottom in the second rule is what is currently in effect. Change the value as you like.

@crouchingbruin Thanks for the answer. It works perfect!
Could you please take a look at one more web page I’m working on?

It’s also a Make theme and I want to do the same – decrease space between header and slider and I tried to use the same rules you provided above, but it doesn’t do the work at the bottom of the header bar. Only at the top.
The site is https://www.stropexa.com

Thanks a lot!!

Try adding these rules:

#menu-menu1,
a.custom-logo-link {
   margin-bottom: 0;
}
.site-header {
   line-height: 0;
}

Perfect!!! Thank you!
Haha looks so simple now… ??

I’m having a similar problem. I need to make the header thinner because it is covering the top of the writing on all the pages when u navigate the menus. our website is campingcentralflorida.com can u help?

i forgot to tell you im using hymalayas theme

@colettedurand, the problem is that there are so many menu items that when the browser is at a certain width, the menu items wraps to another line and makes the header bigger. Right around 1050px, the menu wraps down below the level of the search field because the search field element is defined first. Then around 910px, the Special Events menu item wraps down to a third line. I don’t know how you want to fix it, you can’t really make the header narrower. You can try adjusting the line height of the menu items and search icon by adding a rule like this:

#site-navigation .menu li, 
.search-icon, 
.search-icon i {
    line-height: 34px;
}

By the way, I don’t know if you’ve noticed or not, but your mobile menu button doesn’t work. The reason is that it looks like you’ve manually added some Google Analytics code into your post or page, and you’ve included the blank lines within the script. Whenever you include any sort of scripting code, you have to make sure there are no blank lines or else WordPress will try to insert some HTML paragraph tags, and that screws up not only the script that you are trying to execute but any other javascript (including the script which processes the mobile menu button). Since you’ve already added the Google Analytics code using a plugin, you should remove the code that you manually entered so your mobile menu button will work.

Also, when making changes, you shouldn’t be making any changes to any of the theme files by going to Appearance → Editor (like changes to style.css). The next time you update the theme, your changes will be lost. The suggested way to make theme changes (that can’t be done using the Customizer or the theme options) is to create a child theme or use a Custom CSS plugin if you are just making CSS changes.

Finally, you should post questions related to the Himilaya theme in the Himilaya support page or Theme Grill’s support forum. This is the support forum for the Make theme, and you shouldn’t jump in on someone else’s question, especially if the theme is different. Thanks.

it does not work for me. Don’t know why. Can someone help me?

THX!!!

my site>> https://xn--oo-yjab.cl

it does not work for me. Don’t know why. Iput the CSS and nothing change. Can someone help me?

THX!!!

my site>> https://xn--oo-yjab.cl