Ideally i am looking for something like this menu as inspiration:
When closed - navbar is floating center.
wehn open - navbar is still visible but transparent backdrop mega menu appears and blurs everything in the back.
Hey Matt, here you go: https://preview.webflow.com/preview/nerdic-relume-d0f3c0-073227f1725e3308cb?utm_medium[…]b&preview=fe213b5e2508b508bc64d5b2fe0f890f&workflow=preview
I ended up going in a slightly different direction, because i couldn't get it to work - but I might still do it, if possible.
I have a another issue with my new direction, which you might be able to help with as well?
I opted for going with the more standard solution, but i went out of my way to edit the backdrop of the mega menu.
Therefor I created a background for the menu, that's supposed to mimic rippled glass.
I have implemented the Finsweet Disable scrolling "Toggle" on the burger menu button (I don't know if that's correct, but it was the most logical place to put it for me).
It works on desktop, but it has all kinds of issues somehow on smaller screen sizes (It's worse if the menu is open and closed multiple times).
It's like the backdrop doesn't go 100% all the way.
As you can see on the desktop version, I can't really get the contents of the mega mega "centered" either, which is also pretty annoying 😉
Desktop view closed/open of menu attached.
Mobile view closed/open/scrolled of menu atatched.
Stumbled into yet another problem which renders the mobile navbar menu unscrollable now and i can't seem to fix it.
Current custom css is the following:
/* Keep the base menu fixed */
.navbar20_menu {
position: fixed !important;
width: 100% !important;
height: 100vh !important;
top: 0 !important;
left: 0 !important;
z-index: 2000;
background: transparent;
}
/* Logo Link - Keep visible */
.navbar20_logo-link {
position: relative;
z-index: 2001;
}
/* Menu Button - Keep visible */
.navbar20_menu-button {
position: relative;
z-index: 2001;
}
/* Make menu content scrollable */
.navbar20_menu-content {
position: relative !important;
width: 100% !important;
height: 100vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Menu wrapper styles */
.navbar20_menu-wrapper {
position: relative;
min-height: 100%;
width: 100%;
}
/* Webflow Nav Menu Open Override - This was missing */
[data-nav-menu-open] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
}
/* Glass Effect Background */
.navbar20_menu::before {
content: '';
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0.15) 0px,
rgba(255, 255, 255, 0.15) 8px,
transparent 8px,
transparent 24px,
rgba(255, 255, 255, 0.3),
rgba(0, 0, 0, 0.2)
);
background-size: 30px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
z-index: -1;
}
/* Mobile-specific overrides */
@media screen and (max-width: 767px) {
.navbar20_menu-content {
height: calc(100vh - 80px) !important; /* Adjust 80px based on your header height */
padding-top: 20px;
padding-bottom: 20px;
}
}
