How To Add New Tabs To Your Site-Wide Nav

by Josh (featuring JavaScript from Oliver)

Updated March 10 with slimmer code thanks to Buyorbid's post on the message board.

In an earlier tutorial, I showed you how to hide tabs on the main navbar. In this tutorial, we're going to add a new tab to the main navbar using JavaScript. If you don't know any JavaScript, don't worry-- all you need to do is copy and paste; I'll walk you through the rest. If you're comfortable hacking on JavaScript, feel free to grab this JS code and take off.

  1. Login to the Affiliate Center and navigate to Configure > Pages > Global Page Template.
  2. Copy the following JS code into the <head></head> section on this page:

    3. <script type="text/javascript">
    function addTab(){

    if($('ka_messageBoardsTab')){
    /* add a new <li> to the main navbar */
    var NewTab = document.createElement('li');
    NewTab.id = 'AboutUs';
    $('ka_messageBoardsTab').parentNode.appendChild(NewTab);
    /* write the link into the new <li> */
    $('AboutUs').innerHTML = '<a href="http://www.kickapps.com" title="About Us">About Us</a>';
    }
    }
    Ka.addDOMLoadEvent(addTab);
    </script>

  3. This code adds an About Us tab to the end of the navbar:
  4. To move the About Us tab to another position in the nav, copy the following code snippet into your JS file (a good place to put it is right below the line that ends with "About Us</a>';"). The second parameter of the "insertBefore" command in this snippet is the id of the tab that will sit to the right of the About Us tab. So to put the About Us tab on the far left side of the nav, we fill in 'ka_videoTab' for the second parameter:

    /* change the ordering */ $('AboutUs').parentNode.insertBefore($('AboutUs'),$('ka_videoTab'));

    ...which gives us:

    Or if you'd rather put About Us to the left of the blogs tab, fill in 'ka_blogTab' for the second parameter:

    ...rendering:

    /* change the ordering */ $('AboutUs').parentNode.insertBefore($('AboutUs'),$('ka_blogTab'));

    To put your tab next to one of the other tabs, use one of the following IDs: 'ka_audioTab', 'ka_photoTab', 'ka_memberTab', or 'ka_groupsTab'.

  5. If you'd like your tab to say "Home," "Contact Us," or anything else, replace "About Us" (two words) with the text that you want your new tab to display.You'll probably also want to replace all instances of "AboutUs" (one word) with the ID for your new tab, so that you can target it with CSS later.
  6. Replace "http://www.kickapps.com" with the URL that you want your tab to point to.
  7. You can add another new tab by copying the following code snippet into your JS code and following steps 3-6 (again, a good place to copy it is right below the line that ends with "About Us</a>';"):
    /* add another new <li> to the main navbar */
    var NewTab = document.createElement('li');
    NewTab.id = 'AboutUs';
    $('ka_messageBoardsTab').parentNode.appendChild(NewTab);

    /* write the link into the new <li> */
    $('AboutUs').innerHTML = '<a href="http://www.kickapps.com/about-us/" title="About Us">About Us</a>';
  8. Click "save".

You have now added a new tab to your KickApps navbar. Unless this tab links to another KickApps-served page, you'll probably want to reproduce the whole KickApps navbar on the page that your tab points to. That way the transition between the two will be seamless.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.