Vivienne - Offscreen Menu

The Vivienne theme has 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, or a search bar. We recommend that you use no more than three widgets for optimum display on all devices.

In the demo, the offscreen menu contains a custom menu and social icons.

1. In your Wordpress dashboard, go to Appearance > Menus and create a new menu that you'd like to use inside the offscreen menu.

2. Go to Appearance > Widgets. Drag a Custom Menu widget (or Navigation Menu widget in Wordpress 4.9.4+) into the Offscreen Menu widget area. Select the menu you created in step 1 and then save. The widget title in the demo is "Explore."

3. To add your social icons, drag a Custom HTML widget into the Offscreen Menu widget area. Then add your social icons code to the widget and save. The widget title in the demo is "Connect."

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

No problem! Just remove any widgets in the Offscreen Menu widget area.

Then, go to Wordpress > Appearance > Editor and paste this snippet at the very bottom of the style.css file:

.title-area { padding-left: 0; }
.site-header { padding-left: 30px; }

After pasting, click Update File. You may need to  clear your browser cache to see the change on your site.