Code Scalloped Border to HEader

I'd love to customize the header of my website with a scalloped edge, similar to this website: https://www.lightanddwell.com/ 

Would anyone have code to do so? Much appreciated!

Hello @breezyacres

Here is the code they are using 🙂 

.Content-outer:after {
    margin-top: 138px !important;
    content: "";
    position: fixed;
    top: -45px;
    left: calc(5%);
    width: 90px;
    height: 90px;
    background-color: transparent;
    bottom: -50px;
    left: 0px;
    width: 100%;
    background-image: url(scallop04.png);
    background-size: 40px 15px;
    height: 60px;
    background-repeat: repeat-x;
}

You can customize the image as per your requirement and add it to your site based on your theme CSS Class or ID.

Hope it works!
Let me know
Thanks 
Asif

@asifpro thanks so much for the quick response! I'm struggling a bit as to where to input the code. I've tried both Custom CSS as well as Code Injection into the Header but neither option is working. 

Hello @breezyacres

Can you give me your site like this? Then I could check 

actually, you have to replace this with your current theme-appropriate class

.Content-outer:after

Also, add an image to your squrespace account to get the URL on css

@asifpro I did upload the image to the asset library, however, I'm confused by what the theme-approriate class is/where to change that? 

Can you share your site link please?

https://www.breezyacresdesign.com

header-announcement-bar-wrapper:after

You can try to use this class but make you upload the image file and add the URL  here background-image: url(scallop04.png);
 

It should work 🙂

Had some time to play around with this and I did manage to get the code to work by making a few tweaks. 

First, you have to replace ".content-outer:after" with "header-announcement-bar-wrapper:after"
Second, you have to use the image URL rather than the image file name. I've shared the code below. 

/*Scalloped Header*/
.header-announcement-bar-wrapper:after{
margin-top: 138px !important;
content: "";
position: fixed;
top: -45px;
left: calc(5%);
width: 90px;
height: 90px;
background-color: transparent;
bottom: -50px;
left: 0px;
width: 100%;
background-image: url(THIS REQUIRES THE IMAGE ADDRESS, NOT IMAGE FILE; RIGHT CLICK ON THE IMAGE TO RETRIEVE);
background-size: 40px 15px;
height: 60px;
background-repeat: repeat-x;}

However, this isn't perfect and it's created another set of issues in regards to the Mobile Header. I can't find code to keep the mobile header from shrinking/moving without affecting the desktop so it's a solution that still needs work.