Vivienne [Genesis] - Offscreen Menu

Please note that the offscreen menu displays on desktop screens only. On mobile, your primary navigation menu will collapse automatically into a mobile (hamburger) menu.

The Vivienne theme has an offscreen menu that displays at the top left corner of your website. 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 Navigation Menu widget 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 Appearance > Customize > Additional CSS and paste this snippet:

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