Setting up Menu

Setup Menu Layout

Screen Shot 2558-10-17 at 1.03.20 PM

Theme Support various menu layouts and you can change it via Appearance > Customize > Navigation > General > Menu Layout.

Theme Support custom WordPress menu, you can organise them into dropdown menu too.

Screen-Shot-2557-03-09-at-9.29.16-PM

For those who are not familiar with WordPress menu system below are video tutorial.

Setup Main Menu

Screen Shot 2558-05-18 at 10.22.18 AM

  1. Go to Appearance > Menus. Click “Create Menu” button
  2. To add menu items, select one of your pages/posts on the left hand boxes. Then click “Add To Menu”.
  3. If you want to add custom link menu item (for example home link). Select “Links” and enter URL, Link Text there.
  4. You can organise your menu items using drag&drop functionality. Simple drag a menu item right below to the parent menu item.
  5. After setting up your menu, scroll down to the bottom of the page then assign the menu to “Primary Menu” in the Theme Locations box.

Sticky Menu (Optional)

If you enable sticky menu option. When visitor scroll down to page. The menu bar will stay at top while visitor scrolling. You can enable this option via Appearance > Customize > Navigation > General >Enable Sticky Menu

There are 2 options for sticky menu color scheme “Light” and “Dark”. You can select this option via Appearance > Customize > Navigation > General > Sticky Menu Color Scheme

Mega Menu (Optional)

Mega Menu is extensive sub menu which allow you to display large amount menu items into columns. You can select from 2-4 columns. To setup mega menu. Open Appearance > Menus then you can drag menu items to be child of parent items.

Screen Shot 2558-05-18 at 10.29.46 AM

On menu parent item, open its option box and add class “megamenu” to enable mega menu display. Then enter number of columns you want. For example if you want to display mega menu in 4 columns enter class “col4“.

Screen Shot 2558-05-18 at 10.31.11 AM

So you need to add and organise menu items of this mega menu into 4 columns. Please see above screenshot of Appearance > Menus to get an example.

You can also can display or hide columns name.

Screen Shot 2558-05-18 at 10.33.08 AM

By default it displays each mega menu columns name ex. Project Fullwidth, Project Grid etc. You can also hide it by open menu item option and add “hidden” CSS class.

Customise Main Menu Options and Colors

Screen Shot 2558-05-18 at 10.41.58 AM

You can fully customise main menu options ex. typography, colors, background colors etc. Go to Appearance > Customize > Menu

Setup Top Bar Menu (Optional)

Screen Shot 2558-05-18 at 10.20.34 AM

  1. Go to Appearance > Menus. Click “Create Menu” button
  2. To add menu items, select one of your pages/posts on the left hand boxes. Then click “Add To Menu”.
  3. If you want to add custom link menu item (for example home link). Select “Links” and enter URL, Link Text there.
  4. You can organise your menu items using drag&drop functionality. Simple drag a menu item right below to the parent menu item.
  5. After setting up your menu, scroll down to the bottom of the page then assign the menu to “Top Bar Menu” in the Theme Locations box.

Note: top Bar Menu is not support sub menu.

Setup Side Menu (Mobile Menu)

Side menu is hidden by default. Visitor click three bar icon on the top right of screen to open it. It’s also main menu or tablet (portrait view) and mobile devices.

  1. Go to Appearance > Menus. Click “Create Menu” button
  2. To add menu items, select one of your pages/posts on the left hand boxes. Then click “Add To Menu”.
  3. If you want to add custom link menu item (for example home link). Select “Links” and enter URL, Link Text there.
  4. After setting up your menu, scroll down to the bottom of the page then assign the menu to “Side (Mobile) Menu” in the Theme Locations box.

Customise Side Menu Options and Colors

Screen Shot 2558-05-18 at 10.43.21 AM

You can fully customise main menu options ex. typography, colors, background colors etc. Go to Appearance > Customize > Navigation > Side Menu

Search on Side Menu

Screen Shot 2558-05-18 at 10.48.49 AM

To add search function to side menu. Open Appearance > Customize >Navigation > Side Menu Search > Enable Search. It displays search bar at the top of side menu.

Instant Search

Instant search use AJAX technology to returns search results as you type.OpenAppearance > Customize >Navigation > Side Menu Search < Enable Instant Search

Setup Footer Menu (Optional)

  1. Go to Appearance > Menus. Click “Create Menu” button
  2. To add menu items, select one of your pages/posts on the left hand boxes. Then click “Add To Menu”.
  3. If you want to add custom link menu item (for example home link). Select “Links” and enter URL, Link Text there.
  4. You can organise your menu items using drag&drop functionality.
  5. After setting up your menu, scroll down to the bottom of the page then assign the menu to “Footer Menu” in the Theme Locations box.
  6. Open Appearance > Customize > Footer > Copyright > Copyright Right Area Content and select “Footer Menu”.

NOTE: Footer menu is not support sub menu.

Add Contact Info

Screen Shot 2558-05-18 at 10.45.29 AM

You can add contact information displays on top bar. Go to Appearance > Customize >Navigation > Contact Info

Note: Please make sure you enable Top Bar in order to display contact info content.

Make Menu Transparent

Theme has a page option to make main menu transparent. When you on edit page, look at page option meta box. Check “Make Menu Transparent” option and save changes.

Screen Shot 2558-03-02 at 6.36.11 PM

NOTE: If you use menu transparent option. We recommended to add the first content as image content so your menu is visible otherwise main menu content will be invisible.

Tagged: