How can I round header corners on the Dawn theme?

[James193]

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

[Moeed]

Hey @James193 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[James193]

TsunamiTec.com Password: youdontknow

[websensepro]

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:

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

[Made4uo-Ribe]

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!

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.

[James193]

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

[Made4uo-Ribe]

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. 

[James193 · 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; }