Mia - Offscreen menu

The Mia theme features an offscreen menu that displays at the top left corner of your site. When the hamburger menu button is clicked, the contents of the offscreen menu area will appear.

Offscreen menu when closed:

Offscreen menu when opened:

Setting up the Offscreen Menu

The content of the offscreen menu is housed inside a custom widget area, which can be found at Appearance > Widgets > Offscreen Menu Widget Area. As long as you imported the demo, the offscreen menu should be fully set up for you out of the gate!

Adding your navigation links

The links in the offscreen menu are a navigation menu, which can be edited at Appearance > Menus > Offscreen Menu.

Adding your social links

Go to Appearance > Widgets > Offscreen Menu Widget Area. Click on each social icon to add your social profile URL. 

To remove an icon, click on the icon. In the toolbar, select the 3 vertical dots icon and click "Delete."

To add a new icon, click on the Social Icons block and select the "+" icon to the right of the icons. You can search for an icon in the search bar.

Changing "Hello! I'm Mia" title

Easy! Just click on each heading and replace the text with your preferred text.

Other content

Want to add other types of content to the offscreen menu? You sure can! Any available block or widget can be added to the Offscreen Menu Widget Area. Some ideas are an image and bio about yourself, a signup form, or a search bar.

Customizing the Appearance of the Offscreen Menu

Offscreen Menu Colors

Go to Appearance > Customize > Mia Offscreen Menu. Here, you can change the background color of the toggle button, content background color, link color, etc. Note: The text and background color of the heading can be changed directly inside the Offscreen Menu Widget Area via the block settings. For this reason, there is not a color setting for the heading in the Customizer.

Offscreen Menu Fonts

The font for the heading (i.e. "Hello! I'm Mia") will inherit whatever font you have set at Appearance > Customize > Colors & Fonts > Typography > Heading Font Family.

The font for the navigation links inside your Offscreen Menu will inherit whatever font you have set at Appearance > Customize > Header > Primary Navigation > Design > Navigation Font.

Removing the Offscreen Menu

Don't want to use the Offscreen Menu? Here's how to remove it:

  1. Go to Appearance > Widgets > Offscreen Menu Widget Area and delete all blocks/widgets from this area.
  2. Next, go to Appearance > Customize > Header. Once in the Header section, you'll see the Header Builder appear at the bottom of your screen.
  3. In the Top Row, find the HTML element (this contains the Offscreen Menu toggle button) and click the X icon to delete it.

Manual Setup of the Offscreen Menu

Should you need to set up the Offscreen Menu manually for any reason (for example, if you removed the Offscreen Menu and then want to set it up again in the future), here are instructions:

Toggle Button

The Offscreen Menu toggle button is separate from the widget area.

  1. Go to Appearance > Customize > Header. Once in the Header section, you'll see the Header Builder appear at the bottom of your screen.
  2. Click on the Top Row, Left Column to add a new element.
  3. Select "HTML."
  4. In the HTML Editor box, add: [mia_offscreen_toggle]

Offscreen Menu Content

To add the content to the Offscreen Menu, head to Appearance > Widgets > Offscreen Menu Widget Area. The demo uses the following blocks in this area:

  • Advanced Image block, set to square
  • Row Layout block, full width with light blue background. Inside the Row Layout block, an Advanced Heading block, center aligned, set to H3
  • Navigation Menu widget (containing the offscreen menu links)
  • Social icons block, center aligned, with four icons