Add external link to page menu

API & Customization Show & Tell
1

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>

Screenshot 2022-02-21 at 10.30.46
Screenshot 2022-02-21 at 10.30.462768×1522 203 KB

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:

Screenshot 2022-02-21 at 10.34.10
Screenshot 2022-02-21 at 10.34.101112×262 20.4 KB

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
2

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

3

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.

Capture
Capture942×155 10.3 KB

4

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.

5

Hi

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

Screenshot from 2023-01-12 20-49-15
Screenshot from 2023-01-12 20-49-151920×1040 121 KB

Regards
Dean

6

Still works for me too

7

Thanks Harry,

I don’t appear to get this to work, so I’m wondering if an update to Knack has broken this fix you posted.

Just wondering if you have any ideas (or solutions) to get this to work, as I’d like to create an External Link on my Main Menu to take people back to the my Website which links to my Knack App.

Hoping you can help,

Kind regards,

Dunkie
Data Breaches Digest

1 Like