Use 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.
- 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.
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 toSettings > 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 toSettings > 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