Header Adjustments Dawn Theme

Solved

Header Adjustments Dawn Theme

Lavished
Tourist
32 0 2

 

Hello, 

 Any way I can make more room in Dawn theme Mobile header to make the logo appear bigger,

I already increased the width of logo to the max with a different code.   I would like to decrease the space between the cart and search icon, also move menu hambuger  to the left more  and if possible make the announcement bar  thinner. Thank you. 

 

 

IMG_20250115_142527.jpg

 

Lovedandlavished.com

pw test123

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9885 2354 2953

This is an accepted solution.

Hi @Lavished 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
@media only screen and (max-width: 749px){
.header__icon--cart {
    margin-right: 0 !important;
}
.header__icons {
    margin-right: -1.2rem !important;
}

header.header {
    padding-left: 6px;
    padding-right: 6px;
}

.header__search {
    margin-right: -1.4rem;
}
}
</style>

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1736979527864.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
9885 2354 2953

This is an accepted solution.

Hi @Lavished 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
@media only screen and (max-width: 749px){
.header__icon--cart {
    margin-right: 0 !important;
}
.header__icons {
    margin-right: -1.2rem !important;
}

header.header {
    padding-left: 6px;
    padding-right: 6px;
}

.header__search {
    margin-right: -1.4rem;
}
}
</style>

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1736979527864.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

DaisyVo
Shopify Partner
3795 412 499

Hi @Lavished 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

@media screen and (max-width: 768px){
header.header {
    padding-left: 10px !important;
}
summary.header__icon.header__icon--search > span {
    width: fit-content !important;
}
summary.header__icon.header__icon--search > span > span.svg-wrapper:nth-child(1) {
    width: unset !important;
}
summary.header__icon.header__icon--search {
    width: fit-content !important;
}
}

 

Here is the result: 
 
image_480.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Made4uo-Ribe
Shopify Partner
9885 2354 2953

Welcome! Would you mind hitting 'like' as well? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Lavished
Tourist
32 0 2

I didn't realized it caused a problem , or maybe something else did it, but now my mobile page toggles from side to side, right to left vice versa. 😞

 

Lavished
Tourist
32 0 2

when I deleted the code the problem went away once I added it again the problem returned,- thank you.