Skip to main content

Header Off Canvas Menu

Header Builder

With a Header Navigation template active, this section shows a Header Builder Active notice and a shorter list of settings: Style, Desktop Width (%), Offset, Roundness, Icon Width, Overlay Strength and Blur Background. The Simple Dropdown style isn't offered there. To build the panel's contents with blocks, see Off Canvas Menu. For every header section, see What the Customizer still controls.

Enable on All Viewports​
  • This will add an off canvas menu button on all viewports to your header navigation. When this is disabled, the off canvas menu will only be visible on mobile devices.
Style​
  • Slide Out From Side
  • Slide Out From Side Hover Triggered
  • Fullscreen Cover Slide + Blur BG
  • Fullscreen Cover Fade
  • Fullscreen Cover Split
  • Simple Dropdown

The "Slide Out From Side Hover Triggered" style will force the "Full Width Header" option regardless of your selection.

Separate Mobile Menu​
  • This will cause your off canvas to only display navigation menu items assigned to the "Off Canvas Navigation Menu" location when viewing on a mobile device.
  • Only shown when Enable on All Viewports is off.
Desktop Width (%)​
  • The width of the panel on desktop, as a percentage of the screen width. Only shown with Slide Out From Side.
Offset​
  • Adds a gap, in pixels, between the panel and the edges of the screen.
Roundness​
  • Rounds the corners of the panel, in pixels.
Icon Width​
  • The width of the menu button's icon, in pixels.
Default Background Image​
  • Choose the default image to be shown in your Off Canvas Menu. You can also supply a unique item for each menu item in Appearance > Menus.
  • The functionality for how dropdowns will behave in your off canvas menu: Dropdown Parent Link Toggles Submenu or Separate Dropdown Parent Link From Dropdown Toggle.
  • Not shown with Fullscreen Cover Slide + Blur BG, Fullscreen Cover Fade or Simple Dropdown.
  • Adds the text "Menu" next to your OCM button.
Button Position​
  • Selects the location your OCM button will render in: Default or Left.
Bottom Text​
  • This will add some text fixed at the bottom of your off canvas menu - useful for copyright or quick contact info etc.
Overlay Strength​
  • How much the page behind the open menu is darkened: Solid, Dark, Medium, Light or None.
  • Not all off canvas menu styles utilize this option.
Blur Background​
  • Applies a backdrop blur to the off canvas menu's background.
Mobile Nav Menu Items​
  • This will cause your off canvas menu to inherit any navigation items assigned in your "Top Navigation" menu location when viewing on a mobile device.
  • Only shown when Enable on All Viewports is on.
  • Controls which icons, if any, display in your off canvas menu: Display No Icons, Display Font/Emoji Icons Only, Display Image Icons Only or Display All Icons. Icons are set on each menu item in Appearance > Menus.
Icon Style​
  • Default or Circular. Circular makes the button's background round, so it needs a Button Background Color. Hidden when Menu Label is on.
Button Background Color​
  • Optionally define a background color for your off canvas navigation button within the header.
Button Color​
  • The color of your OCM button's icon and "Menu" label.
Custom Font Size (Desktop)​
  • Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on desktop displays. All unit types are accepted.
Custom Font Size (Mobile)​
  • Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on mobile displays. All unit types are accepted.