Can I resize my logo without altering the header bar size on Shopify?

Edricpoh
Tourist
8 0 3

How do I resize the logo and icons on my header without affecting my banner height? Whenever I adjust the logo size width, the header bar gets thicker, I want my logo, menu fonts and cart icons to be bigger but I want the header bar to remain the same and not get bigger as I increase the logo size. 

My website url is : cheeknchubbs.com

Replies 9 (9)

dmwwebartisan
Shopify Partner
12280 2546 3693

@Edricpoh 

Your shop is password protected. Please share store front password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Edricpoh
Tourist
8 0 3

Hi, storefront password is admin

dmwwebartisan
Shopify Partner
12280 2546 3693

@Edricpoh 

 Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/styles.scss.liquid-->paste below code at the bottom of the file.

@media (min-width: 1024px){
.menu .vertical-menu li {padding: 0px 20px 0 20px !important;}
}

div.header__logo { max-width: 150px !important;}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Edricpoh
Tourist
8 0 3

Hi, Thank you so much! 

Yes the code worked to some extend. I am able to increase the logo size by changing the max width value for the 'header_logo' field in the code you sent.

However the header became bigger together with the logo. Any way I can make the header smaller? I've tried playing with the values for the 'min width' and 'vertical header' as well but it didn't change.

Also, for the menu fonts and shopping cart icons, which do I adjust?

dmwwebartisan
Shopify Partner
12280 2546 3693

@Edricpoh 

 Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/styles.scss.liquid-->paste below code at the bottom of the file.

.menu-position--inline .header__logo {
    width: 100%;
    position: absolute !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Edricpoh
Tourist
8 0 3

Oh yes now it is independent of the logo size!

But it has shifted my top menu slightly to the left and its off centre now. How do I shift it to centre?

dmwwebartisan
Shopify Partner
12280 2546 3693

@Edricpoh 

also add following css class your css file 

.top-bar .social_icons { z-index: 9;}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Edricpoh
Tourist
8 0 3

Hi, after adding the 'top bar social icon' line into the css, something went wrong with my website, now it's black and white throughout and the layout is missing.

 

What did I do wrong?

Edricpoh
Tourist
8 0 3

I tried removing it as well but it did not revert to what it was before.