Support » Theme: Storefront » size of site logo & tagline gone after logo added

  • Resolved freelylw

    (@freelylw)


    Hi, please advise what’s the logo size, I uploaded few logo image with different size, they all have been stretched to different size, no idea what size should upload and where to control the size of the logo.

    2: the tagline is disappear after logo image added, please advise how to have the tagline back.

    we seems don’t have these problems with the previous version of storefront, only the recent version got these problems.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi, @freelylw!

    By default, the logo size used by Storefront is 21% of the fixed width inside the header area, so it’s dynamic. However, the logo’s height to width ratio should be maintained.

    When you say the image has been “stretched,” do you mean it’s being distorted? Can you show us examples of what you see? You can use https://snipboard.io/ to share those with us.

    As for the tagline, you should be able to add that right under where you add the logo and site title in WP Admin > Appearance > Customize > Site Identity:

    Link to image: https://d.pr/i/cvZQNR

    Can you please check if there’s any text saved there?

    Thread Starter freelylw

    (@freelylw)

    Hi, please see the screen here sss

    1: when we add the smaller logo image, it will be stretched to something bigger,when we add the bigger logo image, it will become smaller after uploaded, let’s say, we uploaded a logo image in around 120×90, but it ends up what you see on the link I just attached, it become much bigger on the screen. please advise where to control this, we want to show a logo in size around 120×90, but never get this size showing on the size.

    2: We had the tagline entered in the customize page, buy it won’t show on the page after logo image uploaded, only will show if there is no logo image. you can see the link I just shared, no tagline showing but with tagline entered . please advise . Thanks

    Thread Starter freelylw

    (@freelylw)

    also when you say “By default, the logo size used by Storefront is 21% of the fixed width inside the header area” , what’s the fixed width of the header area please ? it makes things complicated.

    Thread Starter freelylw

    (@freelylw)

    any idea please.

    Thread Starter freelylw

    (@freelylw)

    why no reply ? you still can reply even this function won’t work.

    Niall a11n

    (@wpniall)

    Hi @freelylw,

    Thanks for sharing further details.

    I had a look at your site, and it looks like you should be able to set the roughly 120 × 90 pixels logo size by adding this code to the Appearance > Customize > Additional CSS section of your site’s Customizer:

    
    /* Change Storefront logo width | SF forum wp.org */
    .site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
        width: auto;
    }
    

    Here’s what that should look like:

    lu33.yroom.com - Storefront logo size
    Link to image: https://d.pr/i/rs6ykW

    What’s happening currently is that the logo size is about 230 × 134 pixels (about double the size you uploaded), which is meant to replace the Site Title and Tagline. Changing the width to auto sets the width to the image’s width, which is 120 pixels.

    Please let us know if that works for you or if you need further help!

    Thread Starter freelylw

    (@freelylw)

    Hi, Thanks, but why the tagline is not showing when the logo is uploaded, no answer for this??

    I applied your code to the test site, but the tagline still not showing, please advise.

    Niall a11n

    (@wpniall)

    Hi @freelylw,

    My apologies for the misunderstanding. I had a closer look at the thread and it looks like you would like to display the logo _and_ the tagline at the same time, right?

    This functionality will require some additional customization and settings, as it is not possible to display both the logo and tagline at the same time. By default, the logo replaces the site title and tagline.

    To display the logo and tagline at the same time, please do the following:

    1. Visit Appearance > Customize > Site Identity
    2. Select Remove to remove the logo from displaying. Also, please make sure to add a site title (we will hide the site title later on via code) and tagline and Publish the changes if you have not already done that.
    3. Add this code to the Appearance > Customize > Additional CSS section of your site’s Customizer:

    /* Storefront - Display logo and site title | SF forum wp.org */
    
    .site-branding .site-title a {
    	display: none;
    }
    
    .site-branding::before {
        content: url(/wp-content/uploads/2021/06/cropped-luut-2.png); /* Change the logo's URL if needed */
        background-repeat: no-repeat;
    		width: 120px;
    		height: 70px;
    }

    You may need to reload the page to see the changes, which should look something like this:

    Luut logo and tagline
    Link to image: https://d.pr/i/RN4LUM

    In short, the code hides the site title and displays the logo in its place (you will need to update the logo’s URL in the code if you decide to use a different logo image).

    Does that work for you?

    Thread Starter freelylw

    (@freelylw)

    Hi, Thanks for the code, but the logo is unclickable after your code, can you fix this ?? Thanks

    Adam a11n

    (@adamkheckler)

    the logo is unclickable after your code

    Yes, this is because my colleague above used CSS to set the logo as a background image, as opposed to an actual image on the site itself.

    At this point, we’re unable to help further with custom code requests like this. If you need further assistance getting the logo and tagline working how you want it to, please see our Customizations Page for options.

    Sorry I can’t be of more help here!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘size of site logo & tagline gone after logo added’ is closed to new replies.