KEYdance Posted May 13, 2022 Share Posted May 13, 2022 Site URL: https://www.tastenweise.de Hi, is there a way to make a Mobile Menu (7.1) transparent or blur/glass effect? 808yoi 1 Link to comment
tuanphan Posted May 14, 2022 Share Posted May 14, 2022 It looks like you solved with this CSS? .header-menu-bg { background-color: #000; background: linear-gradient(to bottom,#000,#e45372); } 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
KEYdance Posted May 14, 2022 Author Share Posted May 14, 2022 Yes, I am trying the gradient effect – because I couldn't find a CSS code for a frosted glass effect for Mobile Menu. Is there a glass effect possible? Link to comment
E-W Posted December 28, 2022 Share Posted December 28, 2022 On 5/14/2022 at 4:32 PM, KEYdance said: Yes, I am trying the gradient effect – because I couldn't find a CSS code for a frosted glass effect for Mobile Menu. Is there a glass effect possible? Glass mobile menu effect for 7.1: // Glass Effect Mobile Menu // .header-menu .header-menu-bg { background: transparentt; background-color: rgba(255, 255, 255, .5)!important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } tuanphan and KEYdance 2 Link to comment
KEYdance Posted December 28, 2022 Author Share Posted December 28, 2022 8 hours ago, EWP said: // Glass Effect Mobile Menu // .header-menu .header-menu-bg { background: transparentt; background-color: rgba(255, 255, 255, .5)!important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @EWPThank you for your code – unfortunately it is not working. Link to comment
wearequbit Posted August 24, 2023 Share Posted August 24, 2023 On 12/28/2022 at 10:35 AM, KEYdance said: @EWPThank you for your code – unfortunately it is not working. no, me either - I guess you didn't find a workaround? cc: @E-W Link to comment
KEYdance Posted August 24, 2023 Author Share Posted August 24, 2023 You are right – I coud not figure it out. The "blur"-code seems not to work on Mobile Menu. wearequbit 1 Link to comment
robfeltrin Posted November 22, 2023 Share Posted November 22, 2023 I managed to achieve something similar with this: /* Mobile menu overlay with blurred background */ .header--menu-open::before, { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent!important; backdrop-filter: blur(10px); z-index: 998; } I need it to fly in and out of the screen with my menu, though, and can't seem to find a way to make this work. Anyone? https://violin-halibut-2csa.squarespace.com/ mmmarchitects Link to comment
KEYdance Posted November 22, 2023 Author Share Posted November 22, 2023 @robfeltrin Thank you for your support. Unfortunately your code it is not working on my website – and it seems not to work on yours as well. Instead of a blurring background my (and yours) complete mobile menu (including all text) is blurred – that's not a solution – what a pity. Link to comment
robfeltrin Posted November 23, 2023 Share Posted November 23, 2023 Hi, yes, by the time you looked at it I had probably moved on from that code. It can definitely be done if your mobile menu doesn't have a fly-out like mine does. Link to comment
KEYdance Posted November 23, 2023 Author Share Posted November 23, 2023 (edited) Okay, I understand, but I still haven't seen it yet on any Squarespace mobile menu. I am guessing, that there is limitation by Squarespace to do this via CSS. Recently it came to my mind instead to upload a blurred edited image as mobile menu background. So, it is not generate via CSS, but might have a similar effect – just an idea. Edited November 23, 2023 by KEYdance Link to comment
yitong3 Posted March 7 Share Posted March 7 On 11/23/2023 at 3:34 PM, KEYdance said: Okay, I understand, but I still haven't seen it yet on any Squarespace mobile menu. I am guessing, that there is limitation by Squarespace to do this via CSS. Recently it came to my mind instead to upload a blurred edited image as mobile menu background. So, it is not generate via CSS, but might have a similar effect – just an idea. Well the system wouldn't allow you to do customize the back ground image of the mobile menu, right? Link to comment
KEYdance Posted March 7 Author Share Posted March 7 53 minutes ago, yitong3 said: Well the system wouldn't allow you to do customize the back ground image of the mobile menu, right? You can customize the background image of the mobile menu via CSS. 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