turnerelectrical Posted May 14 Share Posted May 14 Afternoon all, Trying my hardest at this but it's tricky! I've done well so far I think but I'm falling down on this. I'd like the drop down menu to match the style of the site header with the blur. a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: #000000 !important; } Link to comment
Ziggy Posted May 14 Share Posted May 14 Can you share your website URL and site wide password if it's not live? You want the background to be a blur effect rather than black? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
turnerelectrical Posted May 14 Author Share Posted May 14 Hi Ziggy, Apologies! turnerelectrical.uk & yes please, transparent & a blur to match the header. Ziggy 1 Link to comment
turnerelectrical Posted May 14 Author Share Posted May 14 I've just noticed that I can't actually hover over the menu as it disappears! Link to comment
Ziggy Posted May 14 Share Posted May 14 3 minutes ago, turnerelectrical said: I've just noticed that I can't actually hover over the menu as it disappears! It looks like you have created a gap between the navigation and header which is why you can't hover on the dropdown (unless you mouse over to the dropdown very quickly). Adding this property should add a blur: -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
turnerelectrical Posted May 14 Author Share Posted May 14 Hi Ziggy, That doesn't seem to be having any effect at all? Thanks. Link to comment
Shadmon Posted May 14 Share Posted May 14 Can you add this css and let me know if it works? .header-nav .header-nav-item--folder .header-nav-folder-content { backdrop-filter: blur(4px); background: transparent !important; } nayu_vuhido75 and turnerelectrical 1 1 Link to comment
Solution Ziggy Posted May 14 Solution Share Posted May 14 47 minutes ago, turnerelectrical said: That doesn't seem to be having any effect at all? You need to add it within a the class, put together it should look like this: a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); //background: #000000 !important; } .header-nav-folder-content { background: transparent !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } turnerelectrical 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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