Creating a drop-down menu in navigation

If your website has many pages, not all of them need to appear in the main navigation. You may wish to have your visitors navigate through other pages of your site to find related content. This tutorial is going to show you how to use the Flyover Menu feature to improve the navigation of your website. The Flyover Menu is available on all Free and Responsive templates.

If you're a Yola Silver or Yola Gold subscriber, you also have access to second-level submenus which are built into the Premium templates. Take a look at the tutorial for more information: Using Submenus

Step 1: Decide on your categories

The first step is to decide what your pages are going to be and how they are going to be grouped together. For the purpose of this exercise, I am going to make a website about the "Dog Breeds of the World." My goal is to share information about the various type of dog breeds and dog groups.

Step 2: Create your pages

Create new pages by clicking Page and then clicking on the yellow "+". Enter the name of your page and page heading.

User-added image

I am now going to create all the pages for my site. This website is going to have a total of 20 pages. Look how the navigation bar might look with all 20 pages - if I were really making a website about all the breeds of dog in the world it would have hundreds!

I think you will agree with me that this is not a pretty picture. It is also very confusing to your visitors, as they have no way of know what page to go to first! Something must be done...


Step 3: Use the Navigation feature to organize your pages

To organize your pages in the navigation, do the following:

  1. Click Navigation.
  2. The Navigation dialog box will display.
  3. Click on the green indent arrow next to the page you'd like to make as a subpage.
  4. Drag and drop your pages vertically under the top-level page to get them in the right order.
  5. Click OK.

Now you will see the following links on my main navigation:

  • Dog Breeds
  • Hunting Dogs
  • Working Dogs
  • Toy Dogs
  • Contact Us

When you mouse over one of the categories, you will see the Flyover Menu display with the list of subpages I created. This effectively allows you to browse my site without the cluttered navigation.

User-added image

Step 4: Hiding your page

Sometimes, you might want to have a page completely hidden from the navigation but still have a way for people to arrive at that page. This can be achieved by "hiding" your page and creating a link to that hidden page. Here's how:

  1. Click Navigation.
  2. The Navigation dialog box will display.
  3. Click on the green checkmark next to the page you'd like to remove from your navigation (it will become a red "X"). This hides the page from your navigation menu.
  4. Click OK.
User-added image


Step 5: Create your link

The only step that remains is to create the link between your pages. These are the steps:

  1. Go to Widgets. 
  2. Select Popular from the drop down menu.
  3. Drag and drop a Text widget onto your page.
  4. Type and highlight your link text.
  5. Click the "Link" button (looks like a chain link) on the Text Editing Toolbar.
  6. In the Link Editor dialog box, browse for the page you want to link to and click OK.
User-added image
You will now have a well-organized site with a clear hierarchy that will help your visitors find the information they are looking for.
Was this article helpful?
1 out of 1 found this helpful