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.
Inspecting 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;
}
Advice css code for storefront header menu right to logo
Could you send me a link to your website and show me a screenshot or an example of what exactly you’d like to achieve? Then hopefully I can help you.
Hello
Hope you can help. On my site on the pages i.e. https://bookmine.online/listings/ there is a massive amount of padding. How can I take this down to 20px for instance?
Hi Nickie,
looks like you have two options here:
– You can remove the bottom margin of the storefront breadcrumb container
@media (min-width: 768px) {.storefront-breadcrumb {margin-bottom: 0;}}– You can remove the top padding of the listings container with
.sp-designer .site-main {padding-top: 0;}Both options will get the spacing between the 2 containers down.
Hope this helps!
Anna
Thanks a lot for the code..
I want to remove the padding area after navigation and “Below Header ” Widget are.
Thanks
http://www.brahmz.com
Hi Kartikay,
do you mean the white space above your slider? You would have to set:
.home.post-type-archive-product .site-header {margin-bottom: 0;}Hope that helps!
hi….resolved…
thanks a ton!
You’re welcome! All the best for your shop!
When I mouse over the element, the corresponding section on the page changes color. Each color has a meaning, as shown in the original post’s style image.
In my case, I had green (padding) above my header, blue (header), and orange (margin) below my header. And orange (margin) below other elements. I did not have additional padding above or below any of the other elements.
My css
To remove space between header and featured image is:
#masthead.site-header {
margin-bottom: 0;
}
To remove space between featured image and title is:
img.attachment-full.size-full.wp-post-image {
margin-bottom: 0;
}
To remove space between title and content:
h1.entry-title {
margin-bottom: 0;
}
Thank you for sharing Carl! 🙂
Just wanna send you a really quick thanks – tried a few dozen codes to fix the problem and yours was the only one that worked. Thank you!
Hi Anna! I am using Storefront as my theme on a website. I reviewed all of your comments and notes on this post. It was so helpful in reducing the white space within the design! However, I’m still stuck on one and I’m hoping you can help me. 🙂
At the top of the page, underneath the header section, I’m utilizing a Below the Navigation image widget to insert the image of the line of Xs. There is a ton of white space between the page title and the XXX bar. How can I reduce that? Is it related to the H1 or the image widget?
Thanks so much for your help!
Hi Lacey,
the distance between your headline and the xxxxx line is part of the padding of the main content and then the padding of the page heading part. So what you can do is:
.page-template-template-homepage:not(.has-post-thumbnail) .site-main {padding-top: 0;}If you want even less distance, you can add:
.page-template-template-homepage .type-page {padding-top: 0}Both lines will only change the look on you homepage, not on any of the other pages.
I hope this helps!
All the best for you and you shop!
Anna
Hello Anna,
On my site: http://richardnogginco.com
I used the code: .home.post-type-archive-product .site-header {margin-bottom: 0;}
to shorten the padding for the home page. Is there anyway to get that padding to be even less?
If so, how would I go about adding that to the rest of my pages as well?
Thank you for your help!
Hi Kyle,
the white space you see is from the empty WooCommerce Product Header which is added by storefront. You can lower the padding in there by:
@media screen and (min-width: 768px) {.storefront-full-width-content .woocommerce-products-header { padding: 0 0 2em }}for example. If you only put 0 the Woo content will touch your header.
Which other pages would you like to use it for? As you defined “.home” in your snippet it will right now only work on the front page.
Hey Anna,
I would like to use it on every page. To do that would I just replace the .home with whatever the page is called, or is there a way to do it sitewide maybe?
Thank you for your help. I really appreciate it!
You could just remove the home and not replace it at all. Then the css is available for all pages.
Yet, your code is for Woo Archives, if it’s not an archive, the problem won’t be the Woo Header but something else, like the storefront-breadcrump or else. So you might still have to look through the different pages and find the different margins by inspecting elements. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
All my pages should be Woo Archives for right now.
Thank you again! You’re the best!
Thank you!!! On my site sawasawausa.com I really needed this. I’m not sure how to input CSS though. I’ll figure it out.
Great post.
thanks you.
Doesnt seem to be working on proshop child theme
That’s possible. Not every child theme uses the same classes, or often they already overwrite them. the code snippet is only tested with the main storefront theme. You will have to check, if the same classes apply.
Please help, i want my menu to be beside the logo not under it. i also want to reducing the header space.
If you want the menu next to the logo, you can get this plugin: https://www.pootlepress.com/shop/align-menu-right-woothemes-storefront/
Is there a code for the footer padding also?
Hi! I just checked your url and I can’t see any padding around your footer? Do you have a screenshot?
Hi,
I’ve just created my site and i’ve got a lot of extra white space on the homepage, and way to much space around the footer. How can I remove the extra space for the footer?
Hi Sharon,
sorry for the late reply – do you still need to remove space? If yes, where exactly?
Anna
Hi Anna I am building my first website with Woo Commerce and Storefront. I don’t know squat about code!. lol. I want to do some of the same things other have asked you above. However, I don’t want to mess things up. Are there free plugins for editing the Storefront theme header?
Hi Steve,
As I use CSS to adapt themes, I don’t know any plugin extensions for Storefront to do the same. . But there are a lot of storefront extensions here: https://woocommerce.com/product-category/storefront-extensions/ Maybe some of them can help you.
Overall I do have to say, there are basically three ways to go when building a new site
– You know code and how to customize – then you can dream up your perfect site and build it.
– You don’t know code but are ok to spend money on a developer – then you can still dream up the perfect site.
– You don’t know code and don’t want to or can pay a developer – then you adapt your wishes to what’s already there and spend a lot of time with google.
I hope find your way into the theme!
All the best for your new store!
This is the first time I haven’t been able to figure something out. I want to add a Paypal logo, preferably between my title and search box, but just below the search box would be OK if necessary. I suspect that I am losing sales because the PP logo does not show up until someone is checking out…. http://www.patriotbearingsupply.com
Hi! As there is no official spot to include anything in the header, you will have to write it per CSS. You could try something like this
.site-branding:before {
content: '';
background-image: url('YOURURLTOIMAGE');
position: absolute;
right: 0;
width: 46px;
height: 46px;
}
.site-branding {
position: relative;
}
Hope this helps!
Anna
Hello,
I am just trying to get the header itself with the logo and menu smaller with less whitespace, ive tried to remove the padding in the CSS but it doesnt seem to be working out. If you could help that would be great thank you.
Also on the Mobile Menu, it lists Shop with a down arrow next to it the only way to get the drop menu to open is by clicking the arrow whereas if you click shop it goes to a general listings page not a category page, but most people wont know to click on the little arrow off to the right to see the categories, is there a way to fix this?
Thank you
Hi Jason,
for the header padding, you would have to try getting .site-header padding-top and .site-branding margin-bottom to smaller values for the specific screen sizes. That should help.
For the mobile menu you have the problem, that you can’t give one link two different targets. The shop has the target shop page, so it can’t also open the sub-menu. What you can do, is create a seperate mobile menu, where shop is only a placeholder for the submenu. There are plugins like https://wordpress.org/plugins/mobile-menu/
Hope this helps!
Anna