Add external link to page menu

I’ve found a way of adding external links to the main header and thought I’d share

  1. Add a new page to your Knack app and on the page settings change the name to the following:

<a href="[PUT YOUR LINK HERE]" target="_blank"> TEXT HERE </a>

So for example, my link is to the Productive website and the link text is “Support”

  1. This will link to an external page but leaves a residue block with the link to the Knack page intact. As below:

To hide this extra block just add the following CSS to make the extra box invisible:

li a[href="INSERT KNACK LINK PAGE HERE"] {
    padding: 0px !important;
}

where you’ll need to add the href of the knack page. e.g. my page is called Support and so the href is “#support”. If you’re unsure of the href value you can also open the live app, right-click, choose “Inspect” and find the href of the element in the HTML.

4 Likes

Nice @Harry, thanks for sharing, a useful tip :+1:

Bummer, it looks like you can no longer add html to the name field without it being stripped :frowning: Hopefully there’s another workaround out there.

Hey guys!

I’ve got good news: I’ve just completed the code that does exactly what you need.

Go see here: How to setup a blank page that jumps to a URL

It’s Open Source (public and free) and easy to setup - no code at all. Just go in the Builder, add a blank page and set its name to something like this:

Support LINK_OPEN_NEW=https://ctrnd.com/

Support is the text you’ll see in the menu, and the rest becomes invisible.

Set the page to be visible in the menu and that’s it!
You can even decide if it open in a new tab or the same window.

A little feedback would be appreciated :slight_smile:

Have fun,
Normand D.

Hi

This method still works as I just cut and pasted the previous code I’ve used and changed the address to LinkedIn.

Regards
Dean