Narrative Theme - Logo too small on mobile

Highlighted
New Member
1 0 0

My homepage logo is appearing tiny on mobile for some reason and changing the logo height doesn't seem to help. I had a quick look in theme code but can't seem to see how to change this.

Any help would be much appeciated,

Rosie

0 Likes
Highlighted
Tourist
5 0 4

I actually had the same problem and this is how I fixed it:

Once you are in the code editor, you have to go into the Assets folder and select Add a new assest. Name it mobilelogo.css and paste in the following code:

@media only screen and (max-width: 749px){
  .site-header__logo-image {
    max-height: 80px;
  }
}

Next you will want to head over to the Layout folder and open theme.liquid. Paste in the following line of code right above </head>:

{{ 'mobilelogo.css' | asset_url | stylesheet_tag }}

Play around with the "max-height: 80px;" parameters in order to get your logo exactly the size you want it. "80px" is just serving as a placeholder because that's what worked for me but everyones needs/preferences are different.

Hope this helps!

-Rue

1 Like
Highlighted
Tourist
5 0 4

I actually had the same problem and this is how I fixed it:

Once you are in the code editor, you have to go into the Assets folder and select Add a new assest. Name it mobilelogo.css and paste in the following code:

@media only screen and (max-width: 749px){
  .site-header__logo-image {
    max-height: 80px;
  }
}

Next you will want to head over to the Layout folder and open theme.liquid. Paste in the following line of code right above </head>:

{{ 'mobilelogo.css' | asset_url | stylesheet_tag }}

Play around with the "max-height: 80px;" parameters in order to get your logo exactly the size you want it. "80px" is just serving as a placeholder because that's what worked for me but everyones needs/preferences are different.

Hope this helps!

-Rue

3 Likes
Highlighted
Shopify Partner
1 0 1

Hi Rue, 

 

I had the same issue on Narrative and followed your steps but my logo still seems to be too small on the mobile version. My logo image is a transparent background png. 410px width x 205px height and I changed the suggested max height to 80px in the mobile.css code and played around with it up to 100px but it didn't change at all on the mobile version. Is it something to do with my actual logo image file? Would really appreciate your help on this as it has been bugging me for weeks now! See picture attached. 

Thanks Sonia

1 Like
Highlighted
Tourist
8 0 4

hello, it didn't work because the new ending for css files are ".scss" and in the second part of the instruction where you paste "mobilelogo.css" in the theme.liquid file, you need to change it to "mobilelogo.scss". I just tried it and it works. 

 

So to clarify, paste the following line of code in the theme.liquid file, just above the </head> line:

{{ 'mobilelogo.scss' | asset_url | stylesheet_tag }}

This is just a modification to Rue's fix.

2 Likes
Highlighted
Tourist
6 0 7

Hello! I found a  solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.

"id": "logo_max_height",edit logo size.png
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,

2 Likes
Highlighted
New Member
10 0 0

My mobile enlarged slightly, but not my desktop logo.

 

This is what I did. Not working... can you help? Thanks

 

2020-01-11_180740.jpg2020-01-11_180816.jpg

0 Likes
Tourist
6 0 7

Hey! I did a bit more work since my initial post, I have updated it to reflect how to change the logo size on both desktop and mobile correctly. Here is your solution! 

For Desktop Logo Size; 

Navigate to "Header.Liquid" within the code editor. You will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. See the text below and attached picture for reference

"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,edit logo size.png

1 Like
Highlighted
New Member
10 0 0

Thanks for your reply. Problem is for some reason it's not changing on my side? 

0 Likes
Highlighted
Tourist
6 0 7

According to your first post you only followed the steps required to change your mobile logo size. You need to change the code in Header.Liquid in order to change the desktop logo size. What you have done will only modify it on mobile. You must change the max logo height on header.liquid code.. Then save.. Then go to your themes menu and click "customize" as if you are going to change the website design. Once you are in the theme editor, click on the "header" column on the left hand side, and slide the logo slider to make it larger than previously available. 

1 Like