Centering the logo on a WordPress site is a popular design concept, but doing it can be tricky. Most themes, Storefront included, are styled with the logo aligned to the left.
While you can use a premium plugin like Storefront Designer to center the logo, you can edit your child theme’s CSS instead. There are two benefits in doing this manually. For one, you don’t have to buy a plugin. Secondly, you don’t add extra bloat to your site.
How to Center Logo in Storefront with CSS
Before anything else, you should install a child theme on your site otherwise the changes you make will be lost every time you update your theme. Alternatively, you can use Simple Custom CSS Plugin which creates a new stylesheet that won’t get overwritten.
Add the following code to your child theme’s styles.css:
@media screen and (min-width: 768px) {
.site-branding{
text-align: center;
margin: 0 auto !important;
float: none !important;
}
}
Text align and margin set the margin to adjust accordingly to the sides. We need to place “!important” in that line to make sure that it gets priority and doesn’t get overridden by other CSS codes.
We also need to override the default “float:left;” code so that it won’t stick to the left. We do this using “float:none !important;”.
To make sure these styles don’t affect the mobile version of your site, we set a minimum width in the selector.
Doing Away with the Secondary Menu and Search Bar
If you are using Storefront out of the box, the secondary menu and the product search bar will still be in the way. We need to do something about that next. Temporarily, the header will look something like this.
To remove the secondary menu, go to Appearance > Customize > Menu > Menu Locations and do not set the secondary menu to anything.
To move the search bar inline with the main navigation and cart menu, you have to paste the code below to your functions.php file. A word of warning, do not proceed with this step if you do not know what you are doing. One slip up here could cause your site to go down and become inaccessible. Alternatively, you can install My Custom Functions plugin to insert the code. The plugin warns the user the code will cause a fatal error.
add_action( 'init', 'jk_remove_storefront_header_search' );
function jk_remove_storefront_header_search() {
remove_action( 'storefront_header', 'storefront_product_search', 40 );
add_action( 'storefront_header', 'storefront_product_search', 70 );
}
After this step, your site will look something like this.
The product search bar is still not inline with the main navigation as you can see. The CSS code below will adjust the width of the main navigation so that the search box won’t warp around to the bottom.
/*adjusting the width of the main-navigation*/
.woocommerce-active .site-header .main-navigation {
width: 50%;
}
Applying the CSS code above will result to this. Now, the only thing left to do is to resize the search box using CSS.
Putting Everything Together
Put everything inside the media screen brackets, together with the CSS code for the resizing of the search box. The final CSS code will be:
@media screen and (min-width: 768px) {
/*centers the logo*/
.site-branding{
text-align: center;
margin: 0 auto !important;
float: none !important;
}
/* adjusts the width of the main navigation container to accommodate the search box in the same line*/
.woocommerce-active .site-header .main-navigation {
width: 50%;
}
/* positions the search icon properly in the search box*/
#masthead .site-search .widget_product_search form:before {
top: 1.75em;
left: .75em;
position: relative;
}
/* resizes the search box*/
#masthead .site-search .widget_product_search input[type=search],#masthead .site-search .widget_product_search input[type=text] {
padding: .5em .5em .5em 2em;
line-height: 1;
}
/* places the search box to the left of the cart menu(optional)*/
.woocommerce-active .site-header .site-search {
float: left;
}
}
And you’re done. The outcome should look something like this.
If you are unable to achieve this with the above code snippets, it could be that you are using a child theme that has codes that conflict with the codes above. Feel free to post your questions in the comments section.
I got to the step where you add this code:
/*adjusting the width of the main-navigation*/
.woocommerce-active .site-header .main-navigation {
width: 50%;
}
But adding this code didn’t make any difference. The Search Bar was still warped around the bottom, and pushed to the right. Just like it was after the previous step.
So I tried deleting the code I had added and inserted the “Putting Everything Together” Code:
And now my search bar is down below and pushed to the left. How can I fix it to look like yours?
please see: http://ProSkateShop.com
There was an update to Storefront recently which is Storefront 2.0.
They’ve updated the header hook index so paste this to your functions.php instead.
add_action( 'init', 'jk_remove_storefront_header_search' ); function jk_remove_storefront_header_search() { remove_action( 'storefront_header', 'storefront_product_search', 40 ); add_action( 'storefront_header', 'storefront_product_search', 55 ); }Rob,
Hi, thanks for your response! I wasn’t sure if I should paste this into my functions.php in addition to the css edits provided in the article above, or if I should ignore those css edits, and just paste this into the functions.php… Can you please specify that?
Also, my functions.php files says:
* Note: Do not add any custom code here. Please use a custom plugin so that your customizations aren’t lost during updates.
* https://github.com/woothemes/theme-customisations
I tired adding your code there, and it crashed my site, so I deleted that code and my site back back up again.
I checked that github url and it lead me to the “theme-customisations” plugin.. perhaps I should use this to make the edits to the functions.php?
Also, is a child theme necessary to make these edits? Or is there a free plugin that might make the whole process much easier?
Hi Alex,
We recommend using “My Custom Functions” plugin. Just paste the code there and you’re good to go.
And yes, this is another step in addition to the edits to your style.css file. It would look like this in the admin panel. http://prntscr.com/b853wi
A child theme is not necessary but having a child theme is beneficial. Check out this other post: https://wooassist.com/how-to-create-a-child-theme-for-storefront/
Hi Rob, thank you so much for your responses, and all of your help. Unfortunately, my site looks like this: http://ProSkateShop.com (I will leave it as is for a few days so you can see and get back to me.)
Here’s what’s in my “Edit CSS” link (I’m using JetPack)
@media screen and (min-width: 768px) { /*centers the logo*/ .site-branding { text-align: center; margin: 0 auto !important; float: none !important; } /* adjusts the width of the main navigation container to accommodate the search box in the same line*/ .woocommerce-active .site-header .main-navigation { width: 50%; } /* positions the search icon properly in the search box*/ #masthead .site-search .widget_product_search form:before { top: 1.75em; left: .75em; position: relative; } /* resizes the search box*/ #masthead .site-search .widget_product_search input[type=search],#masthead .site-search .widget_product_search input[type=text] { padding: .5em .5em .5em 2em; line-height: 1; } /* places the search box to the left of the cart menu(optional)*/ .woocommerce-active .site-header .site-search { float: left; } }AND HERE IS WHAT’S IN MY Functions.php USING THE “My Custom Functions” PLUGIN.
/* Enter Your Custom Functions Here */ add_action( 'init', 'jk_remove_storefront_header_search' ); function jk_remove_storefront_header_search() { remove_action( 'storefront_header', 'storefront_product_search', 40 ); add_action( 'storefront_header', 'storefront_product_search', 70 ); }I FEEL REALLY THANKFUL THAT WOOASSIST IS HELPING ME TROUBLESHOOT MY WEBSITE. THANK YOU FOR SHARING YOUR KNOWLEDGE WITH CLARITY, CUZ I NEEDED SOME REAL PROS TO HELP ME FIX THIS.
On the last line of your functions.php, update the line:
to
Hi,
I am looking for a way to hide the header background image when it goes to mobile view in Storefront. Is there some code I could use to make that happen please?
Yes, there is a CSS code for that. It will involve media screen query to define the screen size that you want your CSS to exclusively work with. If you can share a link to your site, we can help you with the exact CSS.
I am trying to get my logo plus navigation bar centered but I can’t get it to work. I have added the following code to style.css but it doesn’t change anything on my page. Can you please tell me what I can do to fix it?
@media screen and (min-width: 768px) { .site-branding{ text-align: center; margin: 0 auto !important; float: none !important; } }Hi Kim, please do share the URL of your site so that we can help you with the exact CSS you need.
Hi, thanks for this! It works great! Is there something I can add to center my menu?
Hi Carol! You just need to set the width of the menu to 100%. Then add text-align:center to it. If you share us a link of your site, we’ll see what we can do.
Thanks for the tip, It worked well for me, but I’m trying to center tha logo on the mobile version and I’m stucked, please help me with that, you are my only hope. Thanks
Hi Greg! Can you share us a link of your site so we can see what is happening?
Hi Nick!
I am pretty new in the WordPress world and I’m struggling on how to:
– Center the logo
– Resize the logo (I’d like to have it much bigger than it’s)
– Center the menu bar (Inicio, Tienda, etc…)
After searching the whole day on the Internet and trying to write some code I’ve seen on some forums (including yours) I’m afraid I need your help.
This is my site: http://www.miminimundo.com
Any help would be appreciated!
Thanks a lot 🙂
Arnau
Hi Arnau,
You can try adjusting the size of the logo using this code. Try to use different values for the width.
.site-header .site-branding { width: 80% !important; }As for centering the menu bar, not sure about your issue. You can try our plugin, https://wordpress.org/plugins/storefront-header-picker/
Hope it helps.
Hello,
I ask your help to reproduce the format of the header of my site with storefront like this website http://www.easycash.fr by adding three buttons just at the bottom of the form search:
Thank you in advance.
Hi Mario,
If you require custom development on your site, you may purchase a support package. Please see the link below to our pricing page:
https://wooassist.com/pricing/
For any other questions, please send us an email at [email protected]
Hi,
I have tried this same method inside a media query to center my logo, menu, and a couple of extra divs for mobile and nothing seems to be moving. Any ideas?
Hi Dayle,
Can you link us to your site so we can see what is happening?
You can also email us at [email protected].
Thank you for this tutorial, it works great !
Just do you know how to change the toggle button menu breakpoint ? With this new header, my primary menu sets on 2 lines on devices like Ipads.
Thank you.
Hi Marie,
Could you link us to your site so we can check how it behaves?
Hi
Followed all instructions and it’s perfect except the logo is a little to the left for some reason! Any ideas?
Hi Ff,
It may be an issue with your image or a custom style that has been added to control the position of the image. Try to do an inspect element and adjust the image by adding margin/s.
Thanks for this tutorial! I was able to center the logo on a woocommerce site in a matter of minutes! The site is landlmommyandme.com. It’s still a work in progress 🙂
Hi Erica,
Glad to know this post helped you out.
Hi Rob, Nick,
Thanks so much:) I love Wooassist’s plugins and this helped me center the logo for the desktop version. But unable to do the same for mobile. I even removed and (min-width: 768px) from your suggested code. It finally reads:
@media screen { .site-branding{ text-align: center; margin: 0 auto !important; float: none !important; } }Can you please help me center the mobile logo as well?
Removing this bit ‘(min-width: 768px)’ will apply the styles on the desktop version. That bit you removed is the instruction that the styles will be applied to that specific screen size. The code we provided in the post should do the trick but if it does not center the logo on mobile view, then there may be conflicting styles that override our code. If you can provide a link to your site, we can take a quick look.
Hi Rob, you’re right. Another plugin (Max Mega Menus) was conflicting the mobile styling. Found a workaround now and learnt some CSS on the way too.
Hey, many thanks for the guide!
On mobile the logo is still off to the left on my site (everything works great on desktop).
Any chance you could take a look and see where I’m going wrong?
http://www.blankarchive.com/
Hi Matt,
In your case, you might be using another plugin for the site-branding. You can replace the CSS from the guide to the one below. This will also center the dropdown menu to balance the layout.
@media screen and (min-width: 768px) { .woocommerce-active .site-branding { float: none; text-align: center; } button.menu-toggle { display: block; margin: auto; float: none; } }"Also, is there any way to have the resized search box on the same line as the logo (but set off to the right) as shown here:
https://i.imgur.com/79l3jpH.png
Hi Matt,
I’m afraid not. Centering the logo sets the logo width to 100% so no items could be placed beside it. This is achievable but not using this guide. It will need to be set up differently. Besides, if you put the search bar on the same line, there will be no balance in the layout as there will be a lot of white space to the left of the logo.
Trying to get my navigation and search bar to centre vertically with my logo but adding padding in the customize options doesn’t seem to help. Any idea where I’m going wrong?
http://www.biggusjuice.com.au
Hi Travis,
Adding this to your custom CSS section should fix it:
.sp-header-active .sp-header-span-3 { width: 21.7391304348%; float: left; margin-right: 4.347826087%; padding-top: 100px; }"