Vivienne - Offscreen menu

The Vivienne theme features 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:

Setting up the Offscreen Menu

The content of the Offscreen Menu is housed inside a custom widget area, which can be found at Appearance > Widgets > Offscreen Menu Widget Area. As long as you imported the demo, the Offscreen Menu should be fully set up for you out of the gate!

Adding your navigation links

The links under "Explore" and "The Blog" are navigation menus, which can be edited at Appearance > Menus.

The Explore menu is titled "Offscreen Menu - Explore" and The Blog menu is titled "Blog Categories." You can either edit these menus with your preferred links, or delete them and create your own.

Adding your social links

Go to Appearance > Widgets > Offscreen Menu Widget Area. Click on each social icon to add your social profile URL. 

To remove an icon, click on the icon. In the toolbar, select the 3 vertical dots icon and click "Delete."

To add a new icon, click on the Social Icons block and select the "+" icon to the right of the icons. You can search for an icon in the search bar.

Changing "Explore" and "The Blog" titles

Easy! Just click on each heading and replace the text with your preferred text.

Other content

Want to add other types of content to the Offscreen Menu? You sure can! Any available block or widget can be added to the Offscreen Menu Widget Area. Some ideas are an image and bio about yourself, a signup form, or a search bar.

Customizing the Appearance of the Offscreen Menu

Offscreen Menu Colors

Go to Appearance > Customize > Vivienne Offscreen Menu. Here, you can change the background color of the toggle button, icon color, content background color, link color, etc. Note: The text color of the headings can be changed directly inside the Offscreen Menu Widget Area via the block settings. For this reason, there is not a color setting for the headings in the Customizer.

Offscreen Menu Fonts

The font for the headings (i.e. Explore) will inherit whatever font you have set at Appearance > Customize > Colors & Fonts > Typography > Heading Font Family.

The font for the navigation links inside your Offscreen Menu will inherit whatever font you have set at Appearance > Customize > Header > Primary Navigation > Design > Navigation Font.

Removing the Offscreen Menu

Don't want to use the Offscreen Menu? Here's how to remove it:

  1. Go to Appearance > Widgets > Offscreen Menu Widget Area and delete all blocks/widgets from this area.
  2. Next, go to Appearance > Customize > Header. Once in the Header section, you'll see the Header Builder appear at the bottom of your screen.
  3. In the Top Row, find the HTML element (this contains the Offscreen Menu toggle button) and click the X icon to delete it.
  4. If you want to add some extra space to the left of your site title after removing the Offscreen Menu toggle, click on the Settings wheel icon next to "Logo" in the Top Row, then click on Design. Under Padding, change 15px to 35px, or your preferred value.

Manual Setup of the Offscreen Menu

Should you need to set up the Offscreen Menu manually for any reason (for example, if you removed the Offscreen Menu and then want to set it up again in the future), here are instructions:

Toggle Button

The Offscreen Menu toggle button is separate from the widget area.

  1. Go to Appearance > Customize > Header. Once in the Header section, you'll see the Header Builder appear at the bottom of your screen.
  2. Click on the Top Row, Left Column to add a new element.
  3. Select "HTML."
  4. In the HTML Editor box, add: [vivienne_offscreen_toggle]

Offscreen Menu Content

To add the content to the Offscreen Menu, head to Appearance > Widgets > Offscreen Menu Widget Area. The demo uses the following blocks in this area:

  • Advanced Heading, H5, set to Italic. Text: "Explore"
  • Navigation Menu widget (containing the links under "Explore")
  • Advanced Heading, H5, set to Italic. Text: "The Blog"
  • Navigation Menu widget (containing the links under "The Blog")
  • Advanced Heading, H5, set to Italic. Text: "Connect"
  • Social icons block, left aligned, with four icons