Storefront can be a great theme, but it comes with some hard-coded features, I personally don’t like. One of them is the huge padding around the header. I like headers to be rather slim and less “in your face”.

The setup used in this post is the Storefront Theme and the Storefront Designer extension. The designer adds features to the header settings, which I used to align the menu right of the site title. 
Bildschirmfoto 2016-05-12 um 14.42.45Inspecting the element in my browser, I can see that the element has the id masthead and the class site-header. These will probably be the two CSS items I need to work on.

So I take a closer look at the styles loaded for this particular element. What I find scrolling down, is the ‘padding-bottom’ and a bit further down the ‘padding-top’ of each 2.618em. Another interesting item is the “.sd-header-sticky.admin-bar .site-header” which has a ‘top’ of 32px. Setting either the ‘padding-top’ or the ‘top’ 32px to 0 both show me the desired results on my screen. So I will try adding custom CSS setting to change the menu. 

I always use the Plugin Simple Custom CSS and JS. You can easily enter CSS as well as Javascript, sort it by giving each configuration different names and mostly you have different options to determine when it’s being loaded.

In this case, I had to play with the different options and naming conventions for CSS. At first, my new settings were overwritten by the theme. So I had to load it in the footer and even set it as an external file. I then noticed that the padding-bottom was not loaded, so I had to name it with the ID and the class for it to work.

This is my final code, that rewarded me with a slim menu:

.site-header {
 padding-top: 0;
}

#masthead.site-header {
 padding-bottom: 0;
}

 

Written by anna

Leave a Reply