Redirect menu links

09/09/2019

<script>
// Do as many changes in the menu as you would like below this line. Replace the examples with one or more of your own:
changeMenuLink('contact', 'google.com')
changeMenuLink('About us', 'webnode.com')
changeMenuLink('pictures')



// Don't edit anything below this line, unless you know what you're doing
function changeMenuLink(name, newURL) {
    var elements = Array.from(document.querySelectorAll('.menu-item'))
    var element = elements.find(function(item){ return item.innerText.toLowerCase() === name.toLowerCase()})
    element.setAttribute('href', newURL ? 'https://'+ newURL : '#')
    if(newURL) element.setAttribute('target', '_blank')
}
</script>

With the code above, you can choose to redirect a page in the menu of your website to another URL. You do not have this option in PAGES in your editor.

To use it, copy the whole thing and paste it into SETTINGS - Website settings - Website footer HTML code.

In the code above, you can see that I wrote changeMenuLink(...) 3 times. The first part in each of these is the page name and then the URL to where I want you to be redirected to when clicking it. You can skip the https:// bit in front of the URL. Here is the syntax:

changeMenuLink('page name', 'new URL')

It's important that you put quotations (either " or ') around the name and URL.

The only code you can remove without breaking the script are my 3 examples.

Make menu items unclickable

Note that in the last example, there is no URL. If you leave it like that, it will remove the original link on the page. If I were to add the code above to my website, and I have a page called "Pictures", nothing would happen when I clicked on it.

This can be handy if you have dropdowns in your menu and don't want them to be clickable. It would still change "Pictures" even though I wrote "pictures" in my code, as the code makes whatever you insert case insensitive.