Viewing 6 replies - 1 through 6 (of 6 total)
  • Jarret

    (@jarretc)

    Hello again, we would need a link to your site in order to suggest any code. Without being able to see the site, it is very difficult to almost impossible to suggest any changes that would get you what you’re looking for.

    Thread Starter Anandabrata Ghosh

    (@ananddevops)

    @jarretc sure. Here

    Currently I have managed to adjust the size using below code in – Apperance –>> Customize ->> Additional CSS

    /* Change top padding in header */
    #masthead.site-header {
      padding: 5px;
    }
    
    /* Logo size for mobile site */
    @media screen and (max-width: 768px) {
    .site-header .site-branding img {
    max-height: 90px !important;
    max-width: 90px !important;
    width: 322px !important;
    }
    }
    
    /* Logo size for desktop site */
    @media screen and (min-width: 768px) {
    .site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    height: auto;
    max-height: 90px;
    max-width: 90px;
    width: 322px !important;
    }
    }

    You can help understand incase this is good solution or there is a better way to do this.

    Thanks

    Jarret

    (@jarretc)

    I would try the following for centering the logo

    .site-header .site-branding {
        width: 100% !important;
    }
    
    .site-header .site-branding .custom-logo {
        margin: auto;
    }

    The first part forces the div holding the logo to stretch all the way across, otherwise without it the logo doesn’t look correct compared to the width of the site.

    Looking at the mobile version, I’m not seeing the logo overlapping the menu. Were you able to get that fixed? If not, are you able to provide a screenshot (https://snipboard.io) of what you’re seeing?

    Thread Starter Anandabrata Ghosh

    (@ananddevops)

    Yes @jarretc The overlap issue was resolved on its own, not sure why.

    I also want just the copyright info at bottom, as of now it is hidden due to

    /* Hide the footer details */
    .site-info {
      display: none;
    }

    Centering works fine, but incase of mobile, it shifts the menu down awkwardly. Hence I will avoid using it.

    Thanks

    Jarret

    (@jarretc)

    If you want to control the content that shows up in the footer you can use a plugin such as the following

    https://wordpress.org/plugins/storefront-footer-text/

    Thread Starter Anandabrata Ghosh

    (@ananddevops)

    @jarretc thanks a ton for the help and suggestions. I will reach through a new thread for some more issues, with regard to search bar, cart icon, menu, etc

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

The topic ‘Change Logo Size’ is closed to new replies.