Mia [Genesis] - Offscreen Menu

The Mia theme includes 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:

How to Set Up the Offscreen Menu

Since the offscreen menu is widget-based, you can put   anything you want in it! A few ideas are an image and bio about yourself, a signup form, a navigation menu, or a search bar.

In the demo, the offscreen menu contains four widgets:

1. Image widget

Drag an Image widget into the   Offscreen Menu widget area. Click Add Image and select your image. Save.

Tip: When selecting your image in the Media screen, find the "Attachment Display Settings" in the lower right corner and set the image size to "large" or "full size." That will make sure your image reaches the edges of the offscreen menu like the demo.

2. "Hello, I'm Mia" Title

Drag a Custom HTML widget into the   Offscreen Menu widget area. Paste the following code snippet in the box:

<h5> Hello, I'm Mia. </h5>

Replace "Hello, I'm Mia" with your own text, and then save.

3. Navigation Menu

  1. Create a new menu at Appearance > Menus (further menu instructions here).
  2. Go to Appearance > Widgets.
  3. Drag a Navigation Bar widget into the Offscreen Menu widget area.
  4. Select the menu you created. Save.

4. Social Icons

  1. Fill in your social icons code following this tutorial.
  2. Go to Appearance > Widgets and drag a Custom HTML widget into the Offscreen Menu widget area.
  3. Paste your social icons code in the box and then save.

What if I don't want to use the offscreen menu?

No problem! Just remove all widgets in the Offscreen Menu widget area and the menu button will remove itself.