Charlotte - Offscreen menu

The Charlotte 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!

Changing the Image

To add your own image, click on the existing image and select "Replace." Select your new image.

Adding your navigation links

The links in the offscreen menu are a navigation menu, which can be edited at Appearance > Menus > Offscreen Menu.

Changing "Hi, I'm Charlotte" title

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

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 a short bio about yourself, a signup form, or social icons.

Customizing the Appearance of the Offscreen Menu

Offscreen Menu Colors

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

Note: The text and background color of the "Hi, I'm Charlotte" heading can be changed directly inside the Offscreen Menu Widget Area via the block settings. For this reason, there are not color settings for the heading in the Customizer.

Offscreen Menu Fonts

The font for the heading (i.e. "Hi, I'm Charlotte") will inherit whatever font you have set at Appearance > Customize > Colors & Fonts > Typography > Heading H4 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: [charlotte_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 Image block, set to square
  • Row Layout block, full width with light blue background. Inside the Row Layout block, an Advanced Heading block, center aligned, set to H4
  • Navigation Menu widget (containing the offscreen menu links)
  • Kadence Advanced Search block