Re: How to round corners of header?

Solved

How can I round header corners on the Dawn theme?

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
6735 1820 2202

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


James193
Excursionist
14 1 2

TsunamiTec.com Password: youdontknow

websensepro
Shopify Partner
1854 215 261

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/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

Made4uo-Ribe
Shopify Partner
9867 2349 2946

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.
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.
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
9867 2349 2946

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. 

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