Mobile Menu = transparent/blur/glass effect?

Site URL: https://www.tastenweise.de

Hi, is there a way to make a Mobile Menu (7.1) transparent or blur/glass effect?

It looks like you solved with this CSS?

.header-menu-bg {
    background-color: #000;
    background: linear-gradient(to bottom,#000,#e45372);
}

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?

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);
}

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.

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

You are right – I coud not figure it out. The "blur"-code seems not to work on Mobile Menu.

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

@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.

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.  

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.

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?

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.