size of site logo & tagline gone after logo added

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:

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!

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:

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?

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!