1. Home
  2. Tutorials
  3. Site Menus and Navigation
  4. Use page anchors in your vertical or horizontal menus
 

Web design 1Use page anchors in your vertical or horizontal menus

An anchor is an invisible point which allows you to create a link in a specific place in a page. Anchor linking is perfect for when you have long pages, have create a one-page website, and an anchor allows you to link to anywhere within the page and avoid using the scroll bar. For example, you can link directly to the bottom of the page or create an anchor in a page.

This tutorial is dedicated to creating your menu with anchors.

 

Create an anchor

Click on the anchor icon to place in your content.Anchor icon

  • Choose a name for your anchor that you will use later. Make it memorable and different from the others
  • Place you anchor to mark the point in your page.

The next step is to create a link to this specific point in your page, to the anchor.

Place your Anchor

Create a hypertext link

Create a link towards your anchor

Reminder: To create a link, select the text or the image with your mouse and click on theLink icon. We have a tutorial to explain how to create a hypertext link.

  • In the drop-down menu that will appear scroll down to select an anchor.
  • Click on your anchor title and the navigator will link to the anchor in the future.
  • You can select the anchor by anchor name or the element id that you define

Create a horizontal menu with anchors - Easy

Once you have created your anchor id names and placed the anchor in your page. You will now use these anchors in your horizontal menu. Go to Settings > Menus and you will edit the horizontal menu of your choice by clicking onEdit under Horizontal menu. To find out more about the horizontal menu, this tutorial will help you to set-up your top and bottom menus.

  • Edit the Top Menu by going to Settings > Menus
  • A pop-up menu will appear and you will click on New Link
  • Select the Link Type, choosing Anchor from the drop-down menu
  • Indicate the name of your anchor without the #
  • Indicate the link title that will appear in the menu
  • Be sure to save, wherein you can add another link

Please note that you will need to Save on the Site Menu page as well, if you do not save the modifications will be lost

Create a vertical menu with anchors- Advanced

Once you have created your anchor id names and placed the anchor in your page. You will now make your side menu. Go to Settings > Menus and you will edit the vertical menu of your choice by clicking onAdd a widget in Side menu 1 or Side menu 2. To find out more about the vertical menu, this tutorial will help you to set-up your vertical menus

  • Edit the Side Menu by going to Settings > Menus and ensuring that your side menu is enabled
  • Click on Add a widget
  • Select the widget free zone <html> - you will need to know how to code in html to create the list of your anchor links
  • Create your list starting with <ul class="nav nav-list"> *pictured below
  • Then add your links, adding a line, the link, and the link title: <li><a href="#anchor">Desired title</a></li> *pictured below
  • After you have added the links following the formula above close your menu list by </ul> *pictured below
  • Be sure to save all changes

Please note that you will need to Save on the Site Menu page as well, if you do not save the modifications will be lost

Free zone