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

Solved

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

AndreyGutthard
Excursionist
31 0 7

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

 

 

Thank you in advance!

Accepted Solutions (4)

ZestardTech
Shopify Partner
5647 1032 1359

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

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

 

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

#Mobile view: 

BSSCommerceB2B_2-1718270476101.png

 

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

Have a nice day!

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

This is an accepted solution.

HI @AndreyGutthard 

Please add this code to theme.liquid file, after <head>

 

<style>
@media (max-width: 749px) {
.header__heading-logo { width: 230px !important; }
}
</style>

 

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

dws_pvt_ltd
Shopify Partner
47 11 13

This is an accepted solution.

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

 

Best Regards,
Dws_pvt_ltd

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Partner
5647 1032 1359

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
AndreyGutthard
Excursionist
31 0 7

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

ZestardTech
Shopify Partner
5647 1032 1359

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

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

 

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

#Mobile view: 

BSSCommerceB2B_2-1718270476101.png

 

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

Have a nice day!

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
31 0 7

Awesome this worked aswell! thank you 

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

This is an accepted solution.

HI @AndreyGutthard 

Please add this code to theme.liquid file, after <head>

 

<style>
@media (max-width: 749px) {
.header__heading-logo { width: 230px !important; }
}
</style>

 

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dws_pvt_ltd
Shopify Partner
47 11 13

This is an accepted solution.

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

 

Best Regards,
Dws_pvt_ltd

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.