Logo Size with Secondary Navigation Menu

  • Resolved cab99

    (@cab99)


    5 years, 4 months ago

    Hi,
    I’m trying to customise my logo size on Storefront theme.

    Without have a secondary navigation menu I use this code:
    `@media screen and (min-width: 768px) {
    .woocommerce-active .site-header .site-branding img {
    max-width: 40%; /* Adjust this percentage up or down to make the logo larger or smaller. */
    }
    }`
    and all works fine.

    However, when I add the secondary menu, my logo size can only be adjusted up to a limited very small size. I’ve tried numerous ways, resizing the secondary navigation menu, but the logo size still stays limited.
    Any help appreciated.

    • This topic was modified 5 years, 4 months ago by cab99.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi, the site-branding div is set to a certain width in the CSS

    .storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
    width: 21.7391304348%;
    float: left;
    margin-right: 4.347826087%;
    }

    So if you want the img itself to be larger, you’ll need to increase the width of the site-branding div to allow for a larger image size.

    Thread Starter cab99

    (@cab99)

    Thanks for that. That worked great for the logo resizing.

    After resizing the logo, I now need to reduce the space between the navigation menu and search bar. How can I do this? Padding and margin have no effect.

    Hi, what code have you tried so far? It is difficult to say without being able to see the site as customizations have been made. From looking at the default code, my guesses would be targeting either of the following

    .site-header .col-full

    or

    .site-header .storefront-primary-navigation

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    He @cab99 we haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    @jarretc

    I tried the same code as suggest by you i.e

    .storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
    width: 21.7391304348%;
    float: left;
    margin-right: 4.347826087%;
    }

    But neither the logo nor the header space changes at all. Just a few inputs:

    1. I am making the change in Apperance –> Customize ->> Additional CSS
    2. I have a Child them over the Storefront theme i.e storefront-child-theme-master

    If these make any difference. Kindly suggest

    Hi @ananddevops, probably best to create your own support thread here:

    https://www.ads-software.com/support/theme/storefront/

    With a link to your site as well as you have a child theme setup

    @jarretc Sure, here it is

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Logo Size with Secondary Navigation Menu’ is closed to new replies.