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 homepage

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:

Go to Settings > Style.
In the Customize HTML, CSS, and JS section, select Custom HTML.
In the Select HTML section to edit dropdown, select Top Navigation.

Scroll to the bottom of the HTML and find the ul with the navbar-right class, usually around row 25:

<div class="navbar-collapse collapse" id="navbar-collapse">
    [template("slideout-right-toggle")]
    <ul class="nav navbar-nav navbar-right">
        <li>[template("searchbar")]</li>
        <li>[template("contact")]</li>
        <li>[template("login")]</li>
    </ul>
</div>

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="https://www.knowledgeowl.com/terms-and-conditions" target="_blank">Terms</a></li>
```
If you're using the sample code above, replace the href with the link you'd like. To open in a new tab, keep target="_blank" in the copied code. To open in the same tab, remove the target entirely.
You can Update Preview to see the new top navigation element in action.
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:

<div class="navbar-collapse collapse" id="navbar-collapse">
    
    <ul class="nav navbar-nav navbar-right">
        <li>
	
				
		
	
</li>
        <li><a class="hg-header-link" href="https://www.knowledgeowl.com/terms-and-conditions" target="_blank">Terms</a></li>
        <li>Contact Us</li>
        <li></li>
    </ul>
</div>

And here's how it looks in my knowledge base:

How that added top navigational link looks in my knowledge base

Add a link to the upper right (top navigation)

Related Articles