Adding Phlox Burger Menu to the Header

Many users know Burger Menu as a menu for smaller screen sizes. However, in Phlox theme you can have a burger menu even on large screen sizes.

Burger menu settings allow you to specify a particular place for the menu and determine the type of it.

To set a Burger Menu:

1. Go to your WordPress Admin Panel
2. Click Appearance on the Dashboard
3. Then click Customize
4. Navigate Header > Header Section
5. Now you should click the layout which includes the Burger Menu icon.

In Header Section you can read more about Header Layouts.

Burger Menu Options

To customize the functionality of burger menu icon, you can find the related options in customizer:

1. Go to your WordPress Admin Panel
2. Click Appearance on the Dashboard
3. Then click Customize
4. Navigate Header > Burger Menu

Video Tutorial

Burger Button Color

Burger Button Style

Burger Menu Location

This option specifies the location of the menu after clicking the burger icon, the available locations are:

1. Expandable under top header
2. Fullscreen on entire page
3. Offcanvas Panel

Expandable Under Top Header

To have a classic toggle or accordion menu, you can choose the under top header item.

This option is mostly recommended for mobile devices or those websites that have small wrapper size.

Fullscreen

The fullscreen menu can appear in two different styles, light or dark skin. Also, you are able to combine it with a background image or background color.

Enable submenu indicator, if you want to characterize the menu item with submenu.

Off-canvas Panel

The off-canvas menu appears from the right or left side of the browser when the user clicks on the burger menu icon.

Burger Menu Type

This option is common for all types, the menu can be toggle or accordion. In toggle type, multiple sub-menus appear at a time and in accordion you can choose just one sub-menu.

Accordion Expandable Burger Menu

Toggle Expandable Burger Menu