nitzin Posted April 1 Share Posted April 1 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? Link to comment
nitzin Posted April 1 Author Share Posted April 1 I've figured out the pill shape but still need some help for the blurring effect Link to comment
FinLB Posted April 2 Share Posted April 2 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. Link to comment
nitzin Posted April 15 Author Share Posted April 15 @FinLB Do you know if there is anyway to fix the navigation on mobile? raccoon-vuvuzela-kxxa.squarespace.com Password: SMJ Link to comment
tuanphan Posted April 18 Share Posted April 18 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment