Pippa - Offscreen Menu

The Pippa 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 six 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 Pippa

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

<h5>
    Hello I'm Pippa
</h5>

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

3. Search

Drag the Search widget into the Offscreen Menu widget area. Save.

4. Social Icons

Follow these instructions for the social icons in the Pippa theme. Simply paste your social icons code in a Custom HTML widget in the Offscreen Menu widget area.

5. Explore 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. Give the widget a title if you wish (in the demo, the title is "Explore).
  5. Select the menu you created. Save.

6. Categories Menu

Create another new menu and follow the same instructions as #5. Here's how to add categories to a menu.

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.