Setting up Menu

Menu Layouts Option

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

Setting up Menu using WordPress Custom Menu

Theme Support custom WordPress menu, you can organise them into dropdown menu too. For those who are not familiar with WordPress menu system below are video tutorial.

Setup Primary Menu

  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.

Setup Secondary Menu

If you select “Center Logo + 2 Menus” layout, you can also setup “Secondary Menu” so it displays as right logo menu. See above screenshot.

  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 “Secondary 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

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.

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

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.

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

Customise Main Menu Options and Colors

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

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.

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 Top Bar Contact Information

If you enable top bar. You will have option to display contact information there. Go to Appearance > Customize > Navigation > Contact Info and fill each contact informations there.

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.

IMPORTANT: 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.

Enable Book Button

You can add link to display “Book” button next to main menu items. Simply go to Appearance > Customize > Navigation > General >Booking URL and enter URL of page visitor can complete booking form. It could be external URL or any page URL. Once it’s entered, the button will display.

Tagged: