Making the logo bigger

Hey @gr3gthompson,

you can change it’s size with CSS, but you’ll have to also adjust the width of the secondary navigation and/or the search form, as they are part of the same row.

Editing only the width of the logo will shift the secondary nav and the search form down to the next line.

The class structure to target for the logo is .site-header .site-logo-anchor. For the secondary navigation its .site-header .secondary-navigation and for the search bar, its .site-header .site-search.

Thanks for your help so far. I have played around with the CSS to no success.

It is for the main logo so I tried using .site-header and .site-logo-anchor but it didn’t seem to change anything.

I tried changing the max height number below.

.site-header {
  background-color: #2c2d33;
  padding-top: 2.618em;
  color: #5a6567;
  background-position: center center;
  position: relative;
  z-index: 999; }
  .site-header .site-logo-anchor {
    display: block; }
    .site-header .site-logo-anchor img {
      max-height: 2.618em;
      width: auto; }
  .site-header .site-branding, .site-header .site-logo-anchor {
    margin-bottom: 1.618em; }
  .site-header .widget {
    margin-bottom: 0; }

Hey @gr3gthompson,

Try using the CSS code below:

@media screen and (min-width: 768px) {
    .woocommerce-active .site-header .secondary-navigation {
        width: 37.8260869565%;
    }
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link {
        width: 31.73913%;
    }
}

Please note that these two blocks are part of the same row, so if you increase the width of the logo, make sure to deduct it on the width of the secondary navigation. You may also include here the block for the search form, as it is still part of the same row.

the @media screen and (min-width: 768px) will make sure that the CSS will only affect the desktop view.

wooassist,
Glad to see your answer here. For the non-programming-savvy folk, would you please expand on your answer a bit to include:
1) the location where the above snippet should go?
2) what the extended percentages are in relation to? (and/or how it should be different in real use)
3) how and where it should be deducted from “the width of the secondary navigation”?

I too need to use a wider than 213px logo on Storefront theme, but cannot figure out how to do it. I’m hopeful that an expanded answer could illuminate how.

With apologies for my lack of programming-savvy,
Thanks.

Hey @kellyhobkirk,

1) the location where the above snippet should go?

If you’re using a child theme to modify, then you can simply add it up on your style.css file. If not, then I suggest installing a plugin to enable you to add custom CSS. I recommend using custom simple CSS plugin.

2) what the extended percentages are in relation to? (and/or how it should be different in real use)

Those percentage were generated by a plugin for SASS, which is another topic and more advanced. I prefer not overthink on this.

3) how and where it should be deducted from “the width of the secondary navigation”?

You can simply adjust the width of those two blocks by adjusting the first two digits. You can just simply ignore the decimals.

Hope I have clarified it for you.

@wooassist,

Thank you for the additional info! This is very helpful, though creating a child theme is still too advanced for me. I probably need to hand off to one of our developers. I appreciate this nonetheless. Now I know what needs to be done.

Thank you.

Hi Wooassist.

I have only just got round to this and it worked fantastically. Thank you! =)

Greg

HI Wooassist

This worked beautifully! Thank you for this awesome plugin and also support!

Thanks @wooassist that worked great for my desktop version for my site, is there a way to make the logo bigger on mobile sites? Thanks!

I used the code in simple custom CSS and my logo did get somewhat larger but it’s still hard to read.

Website: https://glasscottageantiques.com/

Can I adjust anything to get a larger view and not affect the size of the header space? The standard dimensions of the jpg. are 732 x 260 as uploaded.

Thanks,

Don

I answered my own question, sorry for any views but couldn’t find how to delete my post.

Thanks.

I cannot make my logo bigger on the hoffman theme on my website https://www.barbellwarriors.com and my menu navigation no longer drops down if you click on the menu on the left.

Is there a way to reset them back to default then attempt to make logo bigger again?

And if anyone could send over the correct code for making the logo bigger I would be hugely grateful.

Thank you,
Rob