1 - Settings

Header style

There are 03 options for Header style. Use the related fields down below to adjust for each style.

  • Header style #1
  • Availability of Vertical menu

  • Header style #2
  • Able to add background image/color for header and the search bar is emphasized.

  • Header style #3

Desktop & Mobile config

  • Logo image: Retina Displays require double the pixels to display the same image.
  • To customize image width, simply insert the value into the textbox.
  • Sticky navigation function can make the main menu follows you when scrolling down.
  • Main menu alignment can be changed using 03 available options and it does not take effect on Header style #2
  • Mobile menu can be different from the desktop one or you can leave it blank to use the same settings as desktop.

Extra features

Note: All menu titles must be typed exactly.

  • Menu flyout left: Normal menu will flyout in the right direction, for a special look, insert the menu title in the textbox to change the direction.
  • Navigation highlight item: All inserted titles will be bolded.

  • Add labels (New/Hot/Sale) on the top right corner of each title by write down the names in related field.

2 - Content

How to add a mega menu?

To create a new mega navigation, please add a Mega navigation ticket. One ticket includes 04 columns & layout settings for the mega menu.


  • Mega navigation trigger: Add the menu's title that you want to turn it into a mega menu (the name must be typed exactly with the item in main menu).

  • Submenu position: The submenu will appear like the chosen option here despite the menu title's position on the main menu.
  • For the shorter submenu, you can drag the Width bar to adjust the spaces between columns to be more suitable.
  • Background style
  • Color: Using the color picker to select a color.
  • Image: After inserting the image, you can change its size and also its position using the related fields below.
  • Min height: Mega navigation section's height

Column settings

  • Content components: Only fields relate to the chosen option will take effect.
  • Column's heading can be turn off on desktop version by ticking off the check box.
  • To change the arrangement, drag the settings bar to adjust the width of each column.

Mega navigation with tabs

Used to group multiple tab menu into one.

  • Mega navigation trigger: Add the menu's title that you want to turn it into a mega menu.
  • Background color: Using the color picker to select a color.
  • Min height: Mega navigation section's height

Tab menu

  • To modify the content for each tab in the mega menu, please create a Tab menu ticket and place them down below the Mega navigation with tabs.
  • You can find it has similar settings as Mega navigation ticket above.

How to add a mega navigation for the Vertical menu?

  • To turn a vertical menu into a mega menu please create a Vertical mega navigation ticket. You will see that it has a same settings options a the Mega navigation ticket which you can refer here.
  • This only takes effect on header style #1 which has vertical menu.