Custom Navigation Shape

I'm looking to create custom shapes for my headers for a new project that is upcoming and was wondering, firstly if it was possible and if so, how to achieve it?

Here's an example the two options that ideally i'd like to create:

Many thanks!

Can you share site url? We can help easier

On 12/9/2020 at 10:08 AM, tuanphan said:

Can you share site url? We can help easier

apologies, here for you.

Here's the URL: https://parakeet-dove-69ll.squarespace.com/
pw is : TestFr4nk

You can see where I have attempted to do it using banner image but it doesn't work too well, thinking maybe an SVG code or image link would work?

"https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608045f370125d086b4af407/1619019251717/notchline.svg"

17 hours ago, theboyinthehat said:

apologies, here for you.

Here's the URL: https://parakeet-dove-69ll.squarespace.com/
pw is : TestFr4nk

 

You can see where I have attempted to do it using banner image but it doesn't work too well, thinking maybe an SVG code or image link would work?

"https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608045f370125d086b4af407/1619019251717/notchline.svg"

Incorrect password

43 minutes ago, tuanphan said:

Incorrect password

It should work, i've just updated the post with an updated password:

TestFr4nk

On 4/22/2021 at 5:16 PM, theboyinthehat said:

It should work, i've just updated the post with an updated password:

TestFr4nk

Do you have this icon?

I think we can use CSS to add pseudo class under header, then set background image. If you have this icon url, I can test the code

On 4/24/2021 at 12:12 PM, tuanphan said:

Do you have this icon?

Yup, here's the URL for it.

"https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608b0473c924e67867933b89/1619723379035/Frank-notch.svg"

On 4/30/2021 at 2:10 AM, theboyinthehat said:

Yup, here's the URL for it.

"https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608b0473c924e67867933b89/1619723379035/Frank-notch.svg"

Add to Design > Custom CSS

/* Header arrow */
header#header:after {
    content: "";
    display: block;
    width: 50px;
    height: 30px;
    background-image: url(https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608b0473c924e67867933b89/1619723379035/Frank-notch.svg);
    position: relative;
    left: 5%;
}

On 5/1/2021 at 8:08 AM, tuanphan said:

Add to Design > Custom CSS

/* Header arrow */
header#header:after {
    content: "";
    display: block;
    width: 50px;
    height: 30px;
    background-image: url(https://static1.squarespace.com/static/60642958ec8402355e2eb3db/t/608b0473c924e67867933b89/1619723379035/Frank-notch.svg);
    position: relative;
    left: 5%;
}

 

Thank you for this. I've added to code but the 'notch' disappears after the page load - on initial load it appears but then disappears after the full load. Is there an !important tag that needs to go somewhere?

On 5/4/2021 at 4:16 PM, theboyinthehat said:

Thank you for this. I've added to code but the 'notch' disappears after the page load - on initial load it appears but then disappears after the full load. Is there an !important tag that needs to go somewhere?

Hi. I see arrow here. Did you solve?