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

AndreyGutthard · ‎06-13-2024

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.

Thank you in advance!

ZestardTech · ‎06-13-2024

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;
}
}

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 · ‎06-13-2024

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:

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:

#Mobile view:

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

Have a nice day!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu · ‎06-13-2024

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

dws_pvt_ltd · ‎06-13-2024

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.

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

ZestardTech · ‎06-13-2024

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;
}
}

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 · ‎06-13-2024

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

ZestardTech · ‎06-13-2024

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 · ‎06-13-2024

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:

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:

#Mobile view:

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

Have a nice day!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

AndreyGutthard · ‎06-13-2024

Awesome this worked aswell! thank you

Dan-From-Ryviu · ‎06-13-2024

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dws_pvt_ltd · ‎06-13-2024

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.

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.

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

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

Community Blog Articles