Simple nav menu backdrop using CSS ::before

When i first started implementing a Material Design Navigation Drawer i ran into problems adding the dark backdrop (you sure CAN add a new div and add show/hide interactions to it but it’s a little tricky)

Today i came up with a much simpler solution using the ::before CSS-pseudo-element:

SEE THE LIVE EXAMPLE

Add this custom code snippet to your webflow project (Project Settings → Custom Code):

  /* simple slide in menu backdrop */

 .w-nav-overlay::before {
    content: "";
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left:0;
    bottom: 0;
    right: 0;
  }

Nice to know

This hack will add a pseudo-element to your webflow .w-nav-overlay item which will be inserted into the HTML Dom (to make sure the navbar is still visible we’ll add it before the navbar gets painted on top).

As an added benefit you’re actively preventing ‘outside-clicks’ (accidentally clicking on a link in the background if you just want to close the drawer by clicking on the outside area)

Have fun! :slight_smile: