Solved

How to manually code mobile logo size in Dawn theme?

Justinpwoods
Shopify Partner
7 0 0

Hi, 

 

I have been given a licensed site to use for a new market but I have no options for a mobile logo size in the theme settings so it needs to be coded manually. 

 

Here is a snippet of the code in the base.css file. I need to make the width approx 220px.

 

Thanks in advance!

 

.header__heading-link:hover .h2 {
color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
line-height: 1;
color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
height: auto;
max-width: 100%;
}

.header__heading-logo-wrapper {
width: 100%;
display: inline-block;
transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
.header__heading,
.header__heading-link {
text-align: center;
}

.header--mobile-left .header__heading,
.header--mobile-left .header__heading-link {
text-align: left;
justify-self: start;
}

.header--mobile-left {
grid-template-columns: auto 2fr 1fr;
}
}

@media screen and (min-width: 990px) {
.header--middle-left .header__heading-link,
.header--top-left .header__heading-link {
margin-left: -0.75rem;
}

 

Thanks in advance!

Accepted Solution (1)
Moeed
Shopify Partner
3803 962 1193

This is an accepted solution.

Hey @Justinpwoods 

 

Remove the previous code completely and add this new updated code with the same steps mentioned above, as it should look good for you then

<style>
@media screen and (max-width: 767px) {
h1.header__heading {
    width: 225px !important;
}
}
</style>

RESULT:

Moeed_0-1712140068945.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 7 (7)

Moeed
Shopify Partner
3803 962 1193

Hey @Justinpwoods 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Justinpwoods
Shopify Partner
7 0 0

thanks Moeed!

 

dycinternational.com

 

dycint is the access password!

Moeed
Shopify Partner
3803 962 1193

Hey @Justinpwoods 

 

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 </body> tag.

<style>
.header__heading-logo {
    height: revert-layer !important;
}
</style>

RESULT:

Moeed_0-1712139263148.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Justinpwoods
Shopify Partner
7 0 0

i'll give that a go now! It looks like the logo isn't looking right though? 

Justinpwoods
Shopify Partner
7 0 0

Hey @Moeed , 

 

the concept works but the logo proportions aren't correct... its now too high... any ideas? 

Moeed
Shopify Partner
3803 962 1193

This is an accepted solution.

Hey @Justinpwoods 

 

Remove the previous code completely and add this new updated code with the same steps mentioned above, as it should look good for you then

<style>
@media screen and (max-width: 767px) {
h1.header__heading {
    width: 225px !important;
}
}
</style>

RESULT:

Moeed_0-1712140068945.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Justinpwoods
Shopify Partner
7 0 0

Amazing! it worked thank you so much.