How can I enlarge my logo on the pipeline theme?

[yasminkoster]

How do I make the logo bigger on pipeline version. I have tried adjusting on the page width however it doesn’t affect the mobile version. Please advise best solution. please see attached the small “Koster Kulture” logo below as apart of the transparent header

[Moeed]

Hey @yasminkoster

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[suyash1]

@yasminkoster - it needs multiple css settings, add this css to the end of your theme.css file and check, change values as per the need, it is for mobile view only

@media only screen and (max-width: 749px){
.header__logo{width: 225px !important;}
.header__logo__link{--LOGO-WIDTH: 225px !important; max-width: 100vw;}
.header__logo__link img{width: 225px;}
}

[PageFly-Richard]

Hi @yasminkoster

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.scss.css

@media only screen and (max-width: 767px){
.header__logo{
   width: 225px !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

[yasminkoster]

hi,

thank you so much, However it has made the logo not centre. Is there a way to fix this?

[suyash1]

@yasminkoster - I think you have removed all the code, can you please add again, so I can check settings to make it center?

[yasminkoster]

@suyash1 yes thank you I have now added this back in

[suyash1]

@yasminkoster - add this css

@media only screen and (max-width: 749px){
.header__mobile{display: flex !important;}
}

[yasminkoster]

thank you so much for helping me. However it has now moved the cart over. please see image below. I would like just the logo to be in the middle and the cart to stay on the far right. If the logo can line up in the middle that would be great, like you showed me in your screenshot. see the comparison below

[suyash1]

@yasminkoster - I see like this

[yasminkoster]

Yes @suyash1 exactly

[suyash1]

@yasminkoster - what is your device width?

[yasminkoster]

@suyash1 The Apple iPhone 14 Pro Max (16th Gen) has height of 6.33” (160.7 mm), width of 3.05" (77.6 mm),

[suyash1]

@yasminkoster - may be that is the reason, because I have seen many times css settings do not work on apple devices as if it is not supported, please check if you get any apple expert who can solve this issue else unfortunately will need to remove the code…

this might be time taking task, so not sure if anyone will do it for free

[yasminkoster]

@suyash1 thank you for your help. Is there anyway to just move the cart back over and we could keep the logo where is?

[suyash1]

@yasminkoster - the code which we use right now works for other phones , so if we try to change it then it might break on other devices

[yasminkoster]

@suyash1 thank you ok. will this code work for any other iphone except the 14?

[yasminkoster]

@suyash1 are you able to share code that will make the logo bigger on the desktop version? currently it looks like this. the whole top bar is extremely small do you have any ways to enlarge the whole header menu, logo and cart?

[suyash1]

@yasminkoster - it can be done but will mneed many css settings and will look very wierd

[yasminkoster]

no worries @suyash1 thank you anyway