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 > Default text's Top Navigation section to update them.

On pages besides the homepage, a search bar's also displayed:

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 Customize > Style (HTML & CSS).
In the Customize HTML, CSS, and JS section, select Custom HTML.
Select Top Navigation from the Select HTML section to edit dropdown.
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.

Copy the code below and add it into the list where you'd like the new link to appear:

<li><a class="hg-header-link" href="https://www.myurl.com" target="_blank">My link</a></li>

Replace the href URL 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.
Change the My link text to the text you'd like displayed in your top navigation.
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.

For example, here's a link to our terms and conditions, set to open in a new tab, with the word "Terms" as the link text.

<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:

Sample top navigation link created from the above code

Add a link to the upper right (top navigation)

Related Articles