• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

  • Home
  • Adding Phlox Burger Menu to the Header
  • Customizing Phlox Header Menu
  • Customizing Phlox Header Section
  • Adding Phlox Burger Menu to the Header
  • Adding Phlox Burger Menu to the Header
  • Adding Phlox Burger Menu to the Header
  • Adding Phlox Burger Menu to the Header

Adding Phlox Burger Menu to the Header


burgermenu-headersectionMany 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.

Note: 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 Colorburgerbutton

It specifies the color of the burger menu icon.

Burger Button Style

You can choose from?different styles for your burger button.

Burger Menu Locationburgerlocation

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.

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

Fullscreen
secondburger

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.

burger-bgimage

Also, there are two templates for fullscreen menu. The menu can be on the center or left.

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-offcanvas

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

 

Was this information helpful?

Submit
Previuos Step
Related articles list
Create New Support Ticket

Maybe You're Searching For These

Introducing Phlox
Customizing Shopping Cart Dropdown Menu
Phlox Code
Phlox Button
Phlox Accordion
Extending and Renewing Phlox Support
Phlox Divider
Getting Started with Phlox News
Copyright © 2017 Averta. All rights reserved.