HOW TO CREATE YOUR HEADER MENU:

The Header Navigation Menu is the menu that sits in your header. This menu can have multi-level dropdowns menus, also referred to as sub-menus.

In Series 2, Episode 2, we learn how to create and customise your Header. When creating your Header if you select a Menu Navigation, it will automatically include your Header Menu. It's perhaps also worth pointing out that your Header doesn't only need to include your Navigation, it can also include your Logo, Action Button, Search, and even a Hamburger Menu icon to open your Menu Drawer, jump ahead to Series 2, Episode 2 at any time. 

To create your Header Menu, you'll need to head over to the Navigation area:

1. Click the Main Menu icon in the top left and select Navigation. 
2. Notice a range of Headers that have been created for you and Click 'Edit' next to the 'Header Menu'
3. Click the '+ Add' button in the top right to Add a new Menu Label
4. Notice that you can Link to Pages that already exist, or if you are creating a New Page, you can create it here and it will automatically be created and located in the Pages area.
5. Once you create a new Menu item, notice that you can drag it into position. 
6. You can also drag it into another menu item, to automatically create a dropdown sub-menu.
7. You can easily Rename Menu labels and remove any menus that you do not require.
8. It's best to have a play as you should find it intuitive and very quick to play around until you are happy.
   
   

DRAWER MENUS

Drawer Menus are 'Off Canvas' menus that slide onto a page. The functionality initially came to the fore for mobile apps, when designers realised they would also be incredibly useful space-saving tools both on mobile and desktop websites.

Drawer Menus are loved by marketers too, since now we can conceal less important pages in the Drawer, allowing to only display the most important pages in the prominent Header Menu. This technique has an incredible effect on conversion rates and we strongly urge you to consider using your Workshop data to select the most important pages (and perhaps a telephone number) for your Header. Then, use a Drawer Menu for your other pages, that will still only ever be one click away.

A Drawer Menu on MOBLE is either used to slide-in from the Right, Left or Top of the page.

A Hamburger Menu icon has universally been used to open Drawer Menu. It inherited its name since the icon is three stacked horizontal bars, that look rather like a hamburger   .

On mobile devices, the Drawer Menu automatically replaces your Header Menu, as standard, therefore still consider placing pages from your Header Menu into a prominent spot in your Side Drawer Menu, so that they are always easily accessed.

SIDE DRAWERS

Side Drawers slide in either form the Right or the Left of the page. A nice technique is to create your Site Map as a Side Drawer, since Side Drawers are multi-tiered (you can have as many sub-tiers as you like), it's a great idea to include all of your website pages to make a Site Map to make all your pages easily accessible on all devices.

When you create sub-menus in your Header Menu, as standard a dropdown menu will display the sub-pages.

Mega Menus are special Menus that replace the downdown menu with a series of columns, images, and/or forms, as you can see in the example image below.

Like Menu Sections and Sidebar Menus, there are many Mega Menu Layouts to choose from in the Layouts Drawer.

You can create and assign a Mega Menu to the Header Menu as follows:

In the Navigation area:

• In the Header Menu create and name a new Menu Item e.g. "Services".

In the Pages area:

• Next, in the Pages Area, add a new Page via the '+ Page' button in the top right.
• It's very important to name the page with 'Menu' followed by a space, and then name them exactly the same name as your Menu. Like this: "Menu Services".
  This ensures the new page has a URL with "menu-" prefix, and the URL for the new page will be created as "/menu-services"
• Now your new "Menu Services" page will be automatically linked to the corresponding page in your Menu.
  I.e. The 'Menu Services' mega menu page, with the URL '/menu-services', will be automatically linked to a menu label that has a page called 'Services' with the URL '/services'.
• Finally, ensure you group the new Page as a "Section" and "Hidden" (as shown in the image below)
• Click 'Create'.

• Now in the Page Editor, open the "Layouts" drawer from the top right.
• Select "Base Layouts", "Sections" and select "Mega Menus".
• Drag your preferred Mega Menu Layout on to your Page, and customise it as you wish.
• Save and Exit your Page. Your Mega Menu page section is now linked to your Header Menu.
  
  

BODY MENUS

Since menus are so easy to create on MOBLE CMS, there is no reason why you can't include menus in the body of your website pages. 

Now that you know how to create new menus and add a menu component to a page, there is no limit to the creative options. The possibilities are endless and give you enormous power to help users find what they are looking for.

Possible uses  for Menus in the body of your page include:

• Top Features
• Best Sellers
• Quick Links
• Most Popular Pages
• Link Banks
• Help Information