Help - how to make the logo smaller on my store? Using Turbo Portland theme

Technical Q&A
1

I’ve been resizing the .png file I got from my Fiverr freelancer over and over, and uploading that in the Logo and then the Secondary logo over content (optional) in the Header section of theme settings.

But the resizing of the .png file to different pixel dimensions hasn’t been seeming to change the size at all in the actual website. I want to make the logo smaller in that bar that appears and continues to hover when you scroll down the page. I’ve already resized the logo from about 1000x800 pixels to 400x200, then uploaded the new smaller size, but it still isn’t working. Any help please?

Here’s a 1.5 minute screen recording to show the issue to make it more clear

Thanks so much for any assistance!

2

@helena8

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi there! My site URL is westinpeak.com

4

You can do this fairly easily by adding this code at the bottom of your styles.css folder in online store → themes → edit code:

header.feature_image.secondary_logo--true img.secondary_logo { width: 100px; }
.menu-position--inline .header__logo { width: 10%! important; }

You can now adjust the logo size to your liking by changing the number 100px to 150px or any other you see fits your store the best. Adjust the logo that appears when you scroll down the page by changing the 10% into 9%, 11%, etc. according to your preference.

This trick is theme-specific though, so if you ever change your theme you’ll need a new solution.

5

@helena8

thanks for url can you try this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
div.header__logo, div.header__logo img, div.header__logo span, .sticky_nav .menu-position--block .header__logo {
    max-width: 150px !important;
}
6

Hi thanks Mike! I appreciate your help. I tried this out and I’m having trouble still. I actually want to make only the Logo smaller. When I tried this, it looks like it made the Secondary logo over content off center, moving it to the right: https://share.getcloudapp.com/6quzGoln

Is there a way to keep that Secondary logo centered and possibly even make it slightly larger while decreasing the Logo size? Thanks!

7

I see. You most likely should hire an expert to look at the code in order to properly fix the issue.

I was able to make it work with this code:

header.feature_image.secondary_logo--true img.secondary_logo { max-width: 210px !important; margin-left: -53px }
.menu-position--inline .header__logo { width: 8%! important; }

so this actually slightly increases the initial logo size and decreases the logo that appears when scrolling down, while keeping both logos centered. I know it’s not the most optimal fix but it does the trick. Although it looks pretty decent with this code already, you can play with the numbers to get the result you like the most.

To implement the code just add it to the styles.css folder under assets in your store’s code editor.