Navigation Bar in Pill Shape

Hi, 

I'm looking to convert my navigation bar into a pill shape, exactly like the wegrow example below (turning it into a pill shape with an opacity/blurring effect). The wegrow example only turns into a pill shape when the user begins scrolling fyi.

Any ideas?

I've figured out the pill shape but still need some help for the blurring effect

    background: inherit!important;

    background-color: rgba(255, 255, 255, .3)!important;

    backdrop-filter: blur(5px)!important;

I would try adding these lines in below where you've made it a pill shape, I assume within

header {

}

The 255, 255, 255 values can be changed to a custom RGB value, and the .3 can alter the opacity of the header. The blur number in the next line can also be changed.

Cheers

Fin.

@FinLB Do you know if there is anyway to fix the navigation on mobile?

raccoon-vuvuzela-kxxa.squarespace.com
Password: SMJ

On 4/15/2024 at 11:55 PM, nitzin said:

Do you know if there is anyway to fix the navigation on mobile?

raccoon-vuvuzela-kxxa.squarespace.com
Password: SMJ

What is problem on mobile?