Smithworks Theme

How do I dim the page behind an open mega menu?

The short answer

Open Style → Screen Overlay. Check the menu types that should dim the page behind the header and the open menu:

  • Dropdown
  • Dropdown + content
  • HubSpot columns
  • Custom columns
  • Custom menu

Checking only Custom columns dims every Custom columns menu and leaves the other types clear. Leave every box unchecked for no dim. Existing headers stay clear until you check a type.

Overlay Color sets the dim. It starts at black with 25% opacity. Change the color, the opacity, or both.

The header and the open menu stay full strength. The dim covers the rest of the page and eases in quickly. The phone menu does not use this dim.

Review SW Header Mega for the matching settings.

A closer look

Open Style → Screen Overlay on SW Header Mega. The dim is off until you check a menu type.

Check the types that should dim the page behind the header and the open menu:

  • Dropdown
  • Dropdown + content
  • HubSpot columns
  • Custom columns
  • Custom menu

The choice is by type, not by one menu item. Checking only Custom columns dims every Custom columns panel. The other types stay clear. You can check one type, several, or all of them.

Overlay Color is the color and opacity of that dim. The starting value is black at 25% opacity.

The header bar, the logo, the menu labels, and the open panel stay full strength. The rest of the page is dimmed. The dim eases in quickly when the menu opens. The phone hamburger menu does not use this dim.

Publish the global header after the theme includes this version, then hard-refresh. Review SW Header Mega.