How to create a backdrop for dropdown/mega-menu's?

How To
1

How can I create a backdrop like the one with the Off-Canvas element for the dropdown menu?

After clicking/hovering to the dropdown/mega-menu, there should be a overlay.

Has anyone done something like this?

1 Like
2

Hey @techtone,

you could use some custom CSS on the dropdown element (not tested extensively though):

root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.5);
  transition: var(--bricks-transition);
}

root:not(.open)::before {
  opacity: 0;
  visibility: hidden;
}

Let me know if that helps.

Best,

André

2 Likes
3

hi, this code doesn’t work. need some configurations

4

Hey @aslotta

Z-index value is the issue. Maybe there is another way to do it?

5

Hey @techtone,

can you provide me with a link to your site where my code snippet is applied so I can see your issue in action?

Best,

André

6

Put this code to your website, and set the top value to height of your header to exclude the backdrop from the header in addition to dropdown:

.brxe-dropdown.nav-item.open:before {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(100,100,100,0.5);
            content: '';
            z-index: 1;
        }

For instance, if your header height is 100px, then the code could be this:

.brxe-dropdown.nav-item.open:before {
            position: fixed;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(100,100,100,0.5);
            content: '';
            z-index: 1;
        }

If any one have a better solution please share.

I hope the team implements this as a feature in the core , as an option like we have now for offcanvas and popup , for desktop and also for tablet and mobile (if the mobile menu doesn’t cover whole the screen, like the nestablle nav).