Tweaking the Menu Bar

I’d like to make the header menu bar a bit thinner on my site, but I’m not sure where/how that can be done. Site: http://donmacdonald.com

Use this in a custom CSS plugin please and let me know if it’s enough:


.site-branding {
   padding: 20px 15px;
}

Trimming some excess white space from my logo helped a bit, maybe padding around the logo is what is keeping the menu bar fat? I tried updating the .site-branding as you suggested (thank you!) but it doesn’t really do anything except make the menu text shift upward slightly when you scroll past the welcome screen. Any other suggestions? Thanks so much,

Don

Oh, you trimmed a lot from the logo. When I gave you the code it was enough to make the menu bar thinner, now you would need to also add this:


.main-navigation li {
    padding: 28px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
    padding: 28px 10px;
} 
}

Let me know how it goes.

cool, cool … thanks! I’m almost there. I adjusted your CSS a bit and now it looks how I want it when it floats, but when the menu bar pins to the top again, it gets thick again. How can I get it so the thin menubar is constant?

Here’s the custom code I added:

.site-branding {
   padding: 5px 15px;
}
.main-navigation li {
    padding: 15px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
    padding: 5px 10px;
} 
}

Replace that code with this:


.site-branding {
   padding: 5px 15px;
}
.main-navigation li {
    padding: 15px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
    padding: 15px 10px;
}
.is-sticky .site-branding {
   padding: 5px 15px;  
}

Perfection!!

You’re the man, thanks very much!

I hopped over to wordpress.org and gave you some stars.

Thanks for taking the time to rate the theme.