« Back to main Free Hosting Bootstrap Builder Free UI Kit

Dim the screen on hover of menu item and focus on dropdown

View demo - hover View demo - clickable 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 darker 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 dropdown menu? It is very simple.

Steps to dim rest screen on hover or click of menu
  • Create bootstrap navbar with dropdown menu
  • Add :after pseudo class to dropdown class (it might be "li" element)
  • Add styling to :after pseudo class to make full screen darker. But make it hidden with opacity:0; or visibility:hidden;
  • Make :after element visible on mouse hover (or onclick) by changing opacity and/or visibility
Here are basic code snippets

« Back to all examples

Creating e-commerce project?