Add a link to the upper right (top navigation)

By default, your knowledge base will include two items in your top navigation:

  • A Contact Us link
  • A Login/Logout link (if you have this option selected)

If you'd like to make changes to the text used for either of those links, use the Customize Text tool's Top Navigation section to update them.

On pages besides the homepage, you'll also see a search bar up there:

Default top navigation with reader login enabled, on all pages besides home page

You can customize this top navigation a bit to add a link to your own help desk, company intranet, or to match links on your main website.

To do so:

  1. Go to Settings > Style.
  2. In the area below the preview pane, be sure Custom HTML is selected.
  3. In the Custom HTML dropdown, select Top Navigation.
  4. Scroll to the bottom of the HTML and find the section with the navbar-right class:
  5. Each of the list items here is one of the elements of your top navigation. The list items at the top will appear furthest to the left; the items at the bottom will appear furthest to the right. To add a list item, add appropriate HTML into the correct spot on the list.  If you're adding a hyperlink and you don't have custom HTML or Custom CSS to explicitly style those links differently, add the hg-header-link class to the hyperlink so it displays the same size and color as your other top navigation links. If you have custom HTML or styles, you'll need to check those styles to add the appropriate classes. Here's some sample code for you to start with:
    <li><a class="hg-header-link" href="" target="_blank">Terms</a></li>
  6. If you're using the sample code above, replace the href with the link you'd like. To open in a new tab, use target="_blank"; to open in the same tab, remove the target entirely.
  7. You can Preview Changes to see the new top navigation element in action.
  8. Be sure to Save once you've gotten the link to look how you'd like.

Here, I've added a hyperlink to our terms and conditions. Notice that it uses the hg-header-link class:
Sample top navigational link to our terms and conditions page has been added
And here's how it will look in my knowledge base:

How that added top navigational link looks in my knowledge base