Solved

How to round corners of header?

James193
Excursionist
14 1 2

I am using the Dawn theme on my Shopify store. I want to have the bottom 2 corners of my header to be rounded by 30px. I also want there to be a margin on the sides of the header by 225rem. I tried to do this myself but have had no luck. My website is TsunamiTec.com and password is: youdontknow

Accepted Solution (1)
James193
Excursionist
14 1 2

This is an accepted solution.

I figured out the problem, wrong selector. this is what ended up working:

 

sticky-header { border-radius: 0 0 30px 30px !important; margin: 0 2.25rem !important; }

 

View solution in original post

Replies 7 (7)

Moeed
Shopify Partner
3542 892 1107

Hey @James193 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is 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. ❤️
Canva to Shopify in clicks - Free App
James193
Excursionist
14 1 2

TsunamiTec.com Password: youdontknow

websensepro
Shopify Partner
873 117 126

Hi, @James193.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

sticky-header {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background: aqua !important;
}

 

Result:

websensepro_0-1696228870239.png

 

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

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Made4uo-Ribe
Shopify Partner
5120 1220 1493

Hi @James193 

Just to clarify, its not the margin is too much? it will take all space in the website screen. 225rem or 2.25rem? Just check this one if its right. Thanks!

Made4uoRibe_0-1696234198755.png

For the code. 

  • 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

sticky-header.header-wrapper.color-scheme-51c6447c-4013-49e7-a792-c0c93ae82502.gradient {
    border-radius: 0 0 30px 30px;
    margin: 0 2.25rem;
}

 

  • And Save.
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


James193
Excursionist
14 1 2

I tried this at the bottom of my base.css and it didn't work or do anything?

Made4uo-Ribe
Shopify Partner
5120 1220 1493

Can you try this one again? just replace the 1st code that I give. Thanks!

sticky-header.header-wrapper.color-scheme-0b4f9145-ad23-49ed-8e50-1055c281223b.gradient {
     border-radius: 0 0 30px 30px !important;
    margin: 0 2.25rem !important;
}

And Save. 

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


James193
Excursionist
14 1 2

This is an accepted solution.

I figured out the problem, wrong selector. this is what ended up working:

 

sticky-header { border-radius: 0 0 30px 30px !important; margin: 0 2.25rem !important; }