Setting up Menu

Setup Menu Layout

Screen Shot 2559-04-16 at 7.01.29 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 2559-04-16 at 7.01.52 PM

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

Setup Main Menu

Screen Shot 2559-04-16 at 7.03.55 PM

  1. Go to Appearance > Menus. Click “Create Menu” button
  2. To add menu items, select one of your pages/posts/categories 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)

Screen Shot 2559-04-16 at 7.04.38 PM

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)

Screen-Shot-2558-07-10-at-4.22.38-PM-1024x170

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. You can also hide it by open menu item option and add “hidden” CSS class.

Category Posts Mega Menu

53

Category Posts Mega Menu is extensive sub menu which allow you to display recent posts from selected category. To setup it. Open Appearance > Menus then you drag category to menu items.

54

55

Open its option box and add class “catmenu” or “catmenu2” to enable category posts mega menu display.

Customise Main Menu Options and Colors

Screen Shot 2559-04-16 at 7.08.52 PM

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

Setup Top Bar Menu (Optional)

Screen Shot 2559-04-16 at 6.59.26 PM

  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.

Enable Side Menu on Desktop.

Screen Shot 2559-04-16 at 7.09.54 PM

By default. Side Menu displays only for tablet (portrait view) and mobile devices. However you can also enable it on desktop and tablet landscape view too. Open  Appearance > Customize > Navigation > Side Menu > Enable Side Menu on Desktop

Customise Side Menu Options and Colors

Screen Shot 2559-04-16 at 7.11.53 PM

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

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.

 

Tagged: