Scale up logo in header on all pages. ON MOBILE (Dawn theme)

Store Design
, , , ,
1

Hey All,

I am using Dawn Theme.

I’m trying to scale up the Logo on my header. Since there is no slider on the mobile screen for that.

And there is a maximum size in the logo image that i can upload. I need the Logo to be larger.

Imporant: I Need it to be larger for the mobile version of my shop.

URL: https://derstacheldraht.com/

I’ve tried a few codes from other discussions in base.cc but they did nothing.

AndreyGutthard_1-1718269029661.png
AndreyGutthard_1-1718269029661.png516×692 434 KB

Thank you in advance!

1 Like
2

Hi @AndreyGutthard

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > main.css and paste this at the bottom of the file:
@media (max-width:767px){
.header__heading-logo {
width: 350px!important;
max-width: initial!important;
}
}

ZestardTech_0-1718270373059.png
ZestardTech_0-1718270373059.png1649×455 493 KB

1 Like
3

Hi @AndreyGutthard ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1718269639032.png
BSSCommerceB2B_0-1718269639032.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.header__heading-link.link.link--text.focus-inset {
    padding: 0;
    scale: 1.5;
    margin-right: 50px;
}

@media (max-width: 768px) {
    .header__heading-link.link.link--text.focus-inset {
        padding: 0;
        scale: 1.65;
        margin-right: 25px;
    }
}

In this step, you can chage scale to scale up your logo in header for desktop and mobile view

Step 3: Save your code and reload this page.

=>> The result is:

#Desktop view:

BSSCommerceB2B_1-1718270429630.png
BSSCommerceB2B_1-1718270429630.png1686×939 380 KB

#Mobile view:

BSSCommerceB2B_2-1718270476101.png
BSSCommerceB2B_2-1718270476101.png681×933 379 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day!

1 Like
4

HI @AndreyGutthard

Please add this code to theme.liquid file, after
1 Like
5

Hello @AndreyGutthard

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below CSS at the bottom of the file → Save

@media screen and (max-width: 500px) {
   .header-wrapper .header {
    grid-template-columns: 1fr 4fr 1fr;
   }
   .header-wrapper .header .header__icon,
   .header-wrapper .header .header__icon--cart .icon {
    height: 3.4rem;
    width: 3.4rem;
   }
}

See image.

dws_pvt_ltd_0-1718270505374.png
dws_pvt_ltd_0-1718270505374.png523×752 264 KB

Best Regards,
Dws_pvt_ltd

2 Likes
6

This one worked well. I went with 250px. Thank you so much for the fast reply.

1 Like
7

Hi @AndreyGutthard

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

1 Like
8

Awesome this worked aswell! thank you