Narrative theme- My logo looks very small on the header

Highlighted
New Member
4 0 0

Hello,

 

I don't have any web design experience, but how do I solve the issue of my logo being too small. there is no field for custom logo size, but there is a slider that allows a maximum of 60 but that's not enough. Help please

0 Likes
Highlighted
Shopify Expert
1381 112 211

Please Share a Store url to better assist.

0 Likes
Highlighted
New Member
4 0 0
Hello,

My store is not live yet, I am still customising it and I won't go live until the logo size is resolved
0 Likes
Highlighted
Shopify Partner
26 0 4

Hi! Did you ever find a solution for this? I'm having the same problem. Max height is only 60px but I can't get any more :(

0 Likes
Highlighted
New Member
1 0 3

Hello,

 

In Narrative Warm theme or also any other, you can just adjust the max-height of the logo from 60px to whatever you need.

 

Simply go to Header.liquid file and search for this section: You can also just search by pressing "Ctrl" + "F" and then paste logo_max_height into the search field.

 

There you can simply change the max: from 60 to like 120 or more. Whatever you need :)

 

{
"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,
"label": {
"da": "Højde på det tilpassede logo (i pixels)",
"de": "Benutzerdefinierte Logohöhe (Pixel)",
"en": "Custom logo height (in pixels)",
"es": "Altura del logo personalizado (en píxeles)",
"fi": "Mukautettu logon korkeus (pikseleinä)",
"fr": "Hauteur personnalisée du logo (en pixels)",
"hi": "कस्टम लोगो ऊंचाई (पिक्सेल में)",
"it": "Altezza logo personalizzato (in pixel)",
"ja": "ロゴの高さをカスタムする(ピクセルで)",
"ko": "사용자 지정 로고 높이 (픽셀)",
"nb": "Tilpasset logohøyde (i piksler)",
"nl": "Aangepaste logohoogte (in pixels)",
"pt-BR": "Altura do logotipo personalizado (em pixels)",
"pt-PT": "Altura do logótipo personalizado (em píxeis)",
"sv": "Anpassad logotypbredd (i pixlar)",
"th": "ความสูงของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
"zh-CN": "自定义 logo 高度(像素)",
"zh-TW": "自訂標誌高度 (單位為像素)"
}
},

 

Please markt his as Solution if it helped you :) it did for me.

Highlighted
Tourist
7 0 2
Hi there, I had done all the above and my desktop logo remains the same small sized. Can anybody help please please!
0 Likes
Highlighted
Shopify Partner
26 0 4

I found out that since I can adjust the size for the main menu logo version (different from the header standard one) in the editor, the header logo got the same px and everything. I uploaded the same file for each function and that was it.

0 Likes
Highlighted
Tourist
7 0 2
Hi Jamie and thanks a lot for your reply. I’m a beginner when it comes to editing code. Could you please explain with steps how you have changed the header size please?
Highlighted
Shopify Partner
26 0 4

Sure.

- in the Shopify dashboard, click "online store" (menu tab on the left)
- Click customize to go to the shopify editor
- Click on the Header section (upper left)

- Then you have 2 boxes to upload the logo, right? I simply uploaded the same file twice, but in the 1st one you have the option to control the "Custom logo height (in pixels)", I set it for 80px and that was it. Hope this helps. Otherwise, I'd say you try the code editing option.

 

Screen Shot 2020-05-14 at 5.32.07 PM.pngScreen Shot 2020-05-14 at 5.32.18 PM.png

0 Likes
Highlighted
New Member
1 0 5

go to your narrative theme, edit the code, select the header.liquid file, around like 260 you will find the min/max for logo_max_height, change it to the max size you'll need, click save and reload your browser page. on mine, it still says max 60px, but i can edit it higher.

edit narrative theme logo size.png