Static Section - Header & Mega menu

Modified on Tue, 2 Feb, 2021 at 4:10 PM

TABLE OF CONTENTS


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.


Layout

  • 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.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article