Back to main
Overlay dark on dropdown menu image illustration

Dim the screen on menu item active and focus on dropdown

View Demo Download


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 shown.bs.dropdown or hide.bs.dropdown on Bootstrap 5 documentation
Here are basic code examples

Back to all examples

Creating an e-commerce project?