Jump to content

Code Scalloped Border to HEader

Recommended Posts

  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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

scallop04.png

Link to comment

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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.