Charlotte - Offscreen Menu

The Charlotte 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. "Hi, I'm Charlotte" Title

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

<h5>
Hi, I'm Charlotte
</h5>

Replace "Hi, I'm Charlotte" with your own text, and then save.

3. Browse the Blog menu

  1. Create a new menu at Appearance > Menus (further menu instructions here).
  2. Go to Appearance > Widgets.
  3. Drag a Navigation Menu widget into the Offscreen Menu widget area.
  4. Give the widget a title if you wish (in the demo, the title is "Browse the Blog").
  5. Select the menu you created. Save.

4. Search

Drag a Search widget into the Offscreen Menu widget area. 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.