Bootstrap Menu
Page darken template

Free page darken template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

Dim the screen on menu item active and focus on dropdown

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

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy