Seeking Help to Make My Header Smaller - Dawn Theme- Similar to Attached Image

Solved
J-lGey
Tourist
4 0 3

I'm facing an issue with my Shopify store and I'm hoping to get some assistance. I would like to make my header smaller, resembling the first image I have attached to this post. As you can see in my example, I've tried tinkering with the CSS to adjust the header's height and width, but my efforts haven't yielded the desired results so far.

 

Link to website:

 https://levimonet.com/

 

example of a website header I am trying to emulate:

https://sodah.co.uk/

 

 

 

Detailed Description:

In more detail, I've attached an image showing the desired header size. It's visibly smaller compared to my current header. I want to replicate this size, but my CSS adjustments haven't proven effective. Here's what I've attempted:

  • I played around with the CSS properties related to the header, such as height and width.
  • I tried different combinations and values to achieve the desired size.

this is what I would like to achieve quite similar to the sodah brand image attached:

 

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
4008 917 1121

This is an accepted solution.

Try this one. 

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

 

<style>
.header__heading-logo {
    height: 80px;
    max-width: 100%;
}
#shopify-section-sections--20040335917348__header .header {
    padding-bottom: 80px;
}
</style>

 

  • And Save. 
  • Example. 
  • Made4uoRibe_0-1698251151724.png
  • Result:
  • Made4uoRibe_1-1698251168980.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4008 917 1121

This is an accepted solution.

Nope, only the header, footer, layout structure, common ccs and javascript. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 7 (7)
Made4uo-Ribe
Shopify Partner
4008 917 1121

Hi @J-lGey 

Would you mind to share the password of your website? if we edit the password header page only this pag change the size not your main store. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


J-lGey
Tourist
4 0 3

Thank you for your quick response. I'm hesitant to share my password. Is there an alternative method through which I can assist you in addressing this issue and finding a solution?

Made4uo-Ribe
Shopify Partner
4008 917 1121

The password im talking about is only the access to your store website if its not publish yet, NOT the admin access. The website where the buyers/costumers/client can check it out. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


J-lGey
Tourist
4 0 3

ohh shame, i have removed the password you should be able to view it 

 

Made4uo-Ribe
Shopify Partner
4008 917 1121

This is an accepted solution.

Try this one. 

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

 

<style>
.header__heading-logo {
    height: 80px;
    max-width: 100%;
}
#shopify-section-sections--20040335917348__header .header {
    padding-bottom: 80px;
}
</style>

 

  • And Save. 
  • Example. 
  • Made4uoRibe_0-1698251151724.png
  • Result:
  • Made4uoRibe_1-1698251168980.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


J-lGey
Tourist
4 0 3

 worked! After inspecting the elements, I was able to discern how you accomplished it. However, I'm curious if it's possible to design everything within the theme.liquid section ?

Made4uo-Ribe
Shopify Partner
4008 917 1121

This is an accepted solution.

Nope, only the header, footer, layout structure, common ccs and javascript. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com