Audrey - Offscreen menu

The Audrey theme features an offscreen menu that displays at the top right corner of your site on desktop. 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 in the offscreen menu come from two navigation menus, which can be edited at Appearance > Menus > Offscreen Menu - Explore and Offscreen Menu - Categories. Feel free to edit these menus with your preferred links!

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.

Search Bar

To change the "Looking for something?" text, click on the Kadence Search Block. Go to Style > Input Style > Placeholder 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 an image, a short bio about yourself, or a signup form.

Customizing the Appearance of the Offscreen Menu

Offscreen Menu Colors

Go to Appearance > Customize > Audrey Offscreen Menu. Here, you can change the background color of the toggle button, content background color, link color, etc.

Note: The background color and icon color of the social icons can be changed directly in the block settings at Appearance > Widgets > Offscreen Menu Widget Areas. For this reason, there are not color settings for the social icons 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.

If Needed: 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: [audrey_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:

  • Navigation Menu widget – title "Explore"
  • Navigation Menu widget – title "Categories"
  • Social Icons block
  • Kadence Advanced Search block