Back to main Free Hosting Bootstrap Builder Free UI Kit
Overlay dark on dropdown menu image illustration

Dim the screen on menu item active and focus on dropdown

View Demo Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

It is good idea, when user activates some dropdown and rest screen becomes dark to keep user's focus on active dropdown. In other word: dim the screen on active submenu or megamenu. So, how to darken the rest of page behind the dropdown menu? It is very simple.

Steps to dim rest screen on hover or click of menu
  • Create bootstrap navbar with dropdown menu
  • Create span or div element that covers whole page with dark transparent background
  • Add styling to that element to hide visually with opacity:0; or visibility:hidden;
  • Now add some javascript function that executes when dropdown opens or closes. Check or on Bootstrap 5 documentation
Here are basic code examples

Back to all examples

Creating an e-commerce project?