How can I add new link to my nav bar in the header when customizing the help center? | Community
Skip to main content

How can I add new link to my nav bar in the header when customizing the help center?

  • March 30, 2016
  • 6 replies
  • 0 views
L

Hello I want to put an extra link in my navigation bar (nav.user-nav) I have attached an image - this link we want to call "Quick User Guide" and have a link to this. I have looked in the forums but have found nothing specific. I can make the extra link/name by copying and pasting one of the others in the Header file etc but can't seem to add the url etc... Do I need to access another html file etc?

Sorry if this is doubling up but I couldn't find what I was looking for so thought a post may help me.

Many thanks Lisa



    This topic has been closed for replies.

    6 replies

    T
    • Tal13
    • March 30, 2016

    Hi Lisa,

    Adding the following Script tag in the Header section in the Theme Editor will do.

    The custom link will be shown to anonymous and logged in users as well.

    See live at:

    https://moderatortal.zendesk.com/hc/en-us
    Log in as sun1@example.com / 123456

    <script>
    $(document).ready(function(){
     $('nav.user-nav>a:last').css('border-left','1px rgba(0, 0, 0, 0.07) solid')
     $('nav.user-nav').append('<a class="custom_navbar_link__c" href="http://www.google.com">Google</a>');
     $('nav.user-nav>a:last').css('border-left','0px')
    })
    </script>

     



     

    M
    • Matt120
    • February 14, 2018

    Hello,

    Is there an updated version of this code for the new Theme style? When using this on my Help Center it keeps placing the link to the right and the border seperator to the left of "Submit a Request"

    Thank you,

    J
    • Jessie17
    • February 14, 2018

    Hey Matt! Welcome to the Community!

    Can you post a screenshot of the code exactly as you entered it? That'll help us figure out what might be going wrong here.

    M
    • Matt120
    • February 14, 2018

    HI Jessie,

     

    Here is the screen shot:

    J
    • Jessie17
    • February 20, 2018

    Thanks Matt! I'll see if one of our Community Moderators can take a look at it with you!

    ModeratorWes

    @Matt - lets get rid of all the JS as we don't really need it for this.  Inside of your header.js add the following below the <nav class="user-nav"

    <a href="https://google.com">Google</a>

    That should add it in there and make it aligned with all the other links.

    Terms & ConditionsCookie settingsAccessibility statement