FROM CACHE - en_header

Narrative theme- My logo looks very small on the header

alexbel
Tourist
4 0 1

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

Replies 23 (23)
Qualitycheck
Shopify Expert
1432 114 234

Please Share a Store url to better assist.

alexbel
Tourist
4 0 1
Hello,

My store is not live yet, I am still customising it and I won't go live until the logo size is resolved
jaime138
Shopify Partner
27 0 6

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 😞

MHDB
Tourist
3 0 8

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.

manieredefaire
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!
jaime138
Shopify Partner
27 0 6

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.

manieredefaire
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?
jaime138
Shopify Partner
27 0 6

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

thebarcompanyuk
New Member
1 0 7

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

Dannielfranics
Tourist
3 0 1

my logo remained the same for mobile and desktop view. is there any other way to change it?

KSC_CEO
New Member
1 0 0

Thanks for that detailed answer, worked perfectly.

Scalecosmetics
New Member
1 0 0

It works!!! Thank you!!!

jmasterpows
New Member
1 0 0

Thank you for this, it worked perfectly. Do you know if there is a way to change the transparent logo size? 

StevenRaven
Tourist
4 0 1

Thanks this worked for my desktop logo. But can you maybe help me out with the mobile version too? It is still small like before. (Why they even set this little thing as an standard size LOL)

AHI2020
New Member
1 0 0

Hey Dannielfranics,

I'm not sure whether you still need the help, but I was having the same issue. I realised that after following the recommendations for adjusting logo size for both desktop and mobile, I also had to go and add max-height code under Assets/theme.scss.liquid.

Under " .site-header__logo-image { " I simply added/typed " max-height: 200px; " to match the other areas I'd changed. This worked for me for both mobile and desktop. I hope this helps.

dmbs001
New Member
1 0 0

Hi AHI2020

Do you have the copy of the code for this? Am trying to figure out where exactly to add " max-height: 200px; " like you've mentioned.

Thanks!

imomar
New Member
4 0 0

it does not work I have tried several times

Aboudz
Excursionist
21 0 5

Do you mind telling me the size of the logo before uploading it ??

novasaigetea
New Member
1 0 0

This helped but the issue I am finding is different... This solution will in fact adjust the max height but it only applies to my desktop and fullscreen versions, the mobile version is still showing as small. I've jacked up the max pixel height to 300! Tom from Shopify got me connected with DesignTime so I'm gonna see how that works and update this post after I try it.