Making logo bigger on Storefront site

  • Resolved suttonsu44

    (@suttonsu44)


    4 years, 9 months ago

    Hi, I’m working on a temp site at the moment and have tried various php and css plugins (code snippets and SiteOrigin css) to increase the logo size but the logo image just won’t go bigger.

    I’ve tried:
    @media screen and (min-width: 768px) {
    /* LOGO */
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 40% !important; /* Use px values if you want, eg. 350px */ }

    /* SECONDARY NAVIGATION */
    .site-header .secondary-navigation { width: 30% !important; /* Use px values if you want, eg. 350px */ }

    /* SEARCH BAR */
    .site-header .site-search { width: 20% !important; /* Use px values if you want, eg. 350px */ }
    }

    Also, increasing .custom-logo width

    Nothing seems to work. It’s v. frustrating. Any ideas on what to try gratefully received. thank you

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @suttonsu44

    This might help:

    .storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
  margin: 0;
  width: 55%;
}

.site-header .custom-logo-link img {
  max-width: 100%;
}

@media screen and (min-width: 768px) {

  .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
    width: 300px;
    float: right;
    margin-right: 0;
    padding-right: 0;
  }

  .woocommerce-active .site-header .site-search {
    clear: both;
  }
}
    Thread Starter suttonsu44

    (@suttonsu44)

    Thank you! It did make the logo bigger, and I’ve tweaked the code a bit but can’t seem to make the search box come back up onto the same line as the logo and secondary menu – is this still possible? Looks odd bumped onto the next line.

    Ideally I’d like to close up the gap between the secondary and primary menus and keep the search box on the top line.

    Would also be good to reduce size of gap between bottom of header and top of content on pages if at all possible.

    Thanks again and hope you can help me move the search box up.

    Thread Starter suttonsu44

    (@suttonsu44)

    Hi, I’ve removed
    .woocommerce-active .site-header .site-search {
    clear: both;
    }

    and Search box sitting on top line again.

    Good enough now, thank you! Excessive spacing my only gripe.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making logo bigger on Storefront site’ is closed to new replies.

Tags