Codex - External Nav Links Tamed

One question which has come up a couple of times in the forums over the last year or two, and I don’t think was ever answered, concerns how to use external links in the amazing Codex theme by Michael David Design.

Codex is available here. I rate this theme as probably the best single page templates available for RapidWeaver and is well worth a look if a single long form page is what your project calls for.

Anyway, the issue in hand is how to use links to external pages in the Codex horizontal (top of page) navigation menu. Just putting your full link into the snippet, provided by MDD when you buy the theme, doesn’t work. So what to do? It’s not straightforward by usual RW standards - but if you really want to do it, here is one way:

[disclaimer: this calls for editing theme code. Work with a duplicate of your precious Codex theme, take your time and above all don’t blame me if you trash your theme!]

  1. In your nav menu snippet add your external link as shown. In this example lets place an external link to www.google.com for simplicity.

Note that for the Google link a new class has been added by appending class=“external-link” after the URL. This is important. You can use any class name you like (as long as it doesn’t conflict), it doesn’t have to be ‘external-link’ but whatever you use make sure you use it all the way through each step in this walkthrough. I use ‘external-link’ and have never had any problems.

  1. Next, you need to open the theme package. Now, although I am using, in this example, the Codex theme itself you REALLY DO want to be working with a duplicate of the theme. Never mess with your pristine copy of the theme, always duplicates… But for simplicity, I’m working with Codex itself.

Anyway, your html stack should reflect something like 1. Now open your theme drawer and right click on the theme and choose ‘show contents’.

  1. Now you will see the theme contents. Open the scripts folder and find the ‘function.js’. Open that file in a text editor.

  1. With that file open, near the top of the file make the following edits:-

Edit One: in the ‘filter’ parameter. Edit Two: In the ‘if’ conditional. Watch out for the class definition ‘dot’ - that only goes in edit two.

  1. Now save that file, the page should refresh, and now your links with the ‘external-link’ class ought to be functional:

Don’t ask me why the theme didn’t come with a built in class that could have simply been added directly in the snippet to achieve this, I guess it just wasn’t part of the design intent for the theme. This method is borrowed directly from the jQuery One Page Nav authors own example on how to achieve (external) link filtering in his plugin.

By linking Codex pages together, under a common design, you can make larger more sophisticated Codex sites which are not constrained to a single (albeit humungous!) page.

Hope this helps Weavers to get even more out of this amazing theme and no, I’m not on the MDD payroll (sadly).

1 Like