One Page Menu with Multi-Page Links

When creating a menu for a website that has anchor links as well as normal links to other pages, you may find that your menu items with anchor links may not work or behave as expected. If you』d like to know more about why this is and how to properly create a menu with a combination of absolute and relative links, please continue reading our detailed guide below.
IMPORTANT NOTE – Please note that anchor links won』t work with the Header Layout #6 that comes with Avada version 4.0.Absolute Vs. Relative LinksTo fully understand the process of of creating a menu with anchor links and normal links, we first need to understand the difference between absolute links and relative links. Please continue reading below for a brief description of each type of links and how they work.
Absolute LinksAn absolute link contains your full site URL. For example, http://www.theme-fusion.com or http://www.theme-fusion.com/about#team. As you can see from the second example, an absolute link may also contain an anchor that is located on another page. Unlike a relative link, using an absolute link as a menu item to point to an anchor on another page will always work, regardless of which page on the website you』re currently on.
Relative LinksRelative links are links which are local or relative to only a specific page. Meaning, the browser will have to be on that page for the link to navigate to the desired location. For example, if the About page contains an Avada Menu Anchor element or an element with the ID team, then a menu item that has the #team relative link as the menu item』s URL, that menu item will only work on the About page.
Creating A Multi-Page MenuThe proper way to create a menu that has both relative and absolute links would be to create two separate menus. One menu to act as your Main Menu, and one menu specifically tailored for the page that contains the anchor links. You』ll then assign your main menu normally, and the specific menu to the corresponding page using Fusion Page Options. Below is a detailed guide on creating both menus.
How To Create Your Main MenuStep 1 – Go to the Appearance > Menus tab and create a new menu.
Step 2 – Build your menu as you normally would. For the links that you』d like to point to an anchor on a specific page, insert a 『Custom Link』 and use the absolute link of the anchor. For example, if the anchor you』d like to point to is on the About page, then your URL will look like this: http://www.website.com/about#team
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective absolute links.
Step 4 – Set this menu as your Main Navigation by checking the 『Main Navigation』 checkbox under Menu Settings.
Step 5 – Save all your changes by clicking the 『Save Menu』 button.
How To Create Your Specific MenuStep 1 – Go to the Appearance > Menus tab and create a new menu. Give it a unique name. For example, About Page Menu. For a visual guide of the steps, click here.
Step 2 – Build your specific menu identical to your main menu. This time, instead of putting absolute links in the menu items that point to an anchor on another page, you』ll insert their relative link. For example, if the absolute link is http://www.website.com/about#team, then you』ll replace it with just #team as seen in in example image.
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective relative links.
Step 4 – Save all your changes by clicking the 『Save Menu』 button.
Step 5 – Navigate to the specific page that contains the anchor links.
Step 6 – Go to Fusion Page Options > Header and select your specific menu from the dropdown on the Main Navigation Menu option.
Step 7 – Save all your changes by clicking 『Save Draft』 or 『Publish』.
Why Create A Multi-Page Menu This Way?Creating two menus is the proper way to create a multi-page menu because it』s the best way to display relative links. If you only use one menu and only use relative anchor links for your menu items, then those menu items will not work unless you』re in the specific page where those anchors are found. This is because WordPress just appends the anchor to the current URL.
On the other hand, If you only use absolute links, then all your menu items containing the anchor links will all be highlighted when you』re in the specific page where those anchors are found. This is because as far as WordPress is concerned, you』re already on that anchor because you』re on the specific page they』re located.