How to get the language dropdown menu option visible to users in Help Center theme

3 Comments

  • Dave Dyson
    Zendesk Community Manager
    HI Lisa, and welcome to the community!
     
    If you already have multiple languages set up for your help center (see Configuring your help center to support multiple languages if you haven't yet done that), and you're using the default Copenhagen help center theme (or using it as your starting point), the language drop-down might be located in the footer of the page, instead of the header. If it's there, you can move the code for it from your footer.hbs file in your theme, to the header.hbs file, and then it will appear at the top of the page.
     
    I explained to another user how to do this here: Postion of the language dropdown
     
    Hope that helps!
     
    0
  • Lisa Kugler

    Hi Dave,

     

    This is helpful although I'm not sure if I'm trying to place this line of code in the right space in the header code (disclaimer: I'm not a developer):

    <div class="footer-language-selector">
          {{#if alternative_locales}}
            <div class="dropdown language-selector">
              <button class="dropdown-toggle" aria-haspopup="true">
                {{current_locale.name}}
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </button>
              <span class="dropdown-menu dropdown-menu-end" role="menu">
                {{#each alternative_locales}}
                  <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
                    {{name}}
                  </a>
                {{/each}}
              </span>
            </div>

     

     

     

     

     

     

     

     

    I tried placing it where you said but i keep getting an error message in red when I click to publish.
    Here is my header code in its entirty. Basically we just want the language menu to the right of the user name at the top.
    <a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>

    <header class="header">
      <div class="logo">
        {{#link 'help_center'}}
          <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}" />
          {{#if settings.show_brand_name}}
            <span aria-hidden="true">{{help_center.name}}</span>
          {{/if}}
        {{/link}}
      </div>

      <div class="nav-wrapper-desktop">
        <nav class="user-nav" id="user-nav">
          <ul class="user-nav-list">
            <li>{{link 'community'}}</li>
            <li>{{link 'new_request' class='submit-a-request'}}</li>
            {{#unless signed_in}}
              <li>
                {{#link "sign_in" class="sign-in"}}
                  {{t 'sign_in'}}
                {{/link}}
              </li>
            {{/unless}}
          </ul>
        </nav>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="dropdown-toggle" aria-haspopup="true">
              {{user_avatar class="user-avatar"}}
              <span>
                {{user_name}}
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{#my_profile role="menuitem"}}{{t 'profile'}}{{/my_profile}}
              {{link "requests" role="menuitem"}}
              {{#link "contributions" role="menuitem"}}{{t "activities"}}{{/link}}
              {{contact_details role="menuitem"}}
              {{change_password role="menuitem"}}
              <div class="separator" role="separator"></div>
              {{link "sign_out" role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </div>

      <div class="nav-wrapper-mobile">
        <button class="menu-button-mobile" aria-controls="user-nav-mobile" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          {{#if signed_in}}
            {{user_avatar class="user-avatar"}}
          {{/if}}
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-menu">
            <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"/>
          </svg>
        </button>
        <nav class="menu-list-mobile" id="user-nav-mobile" aria-expanded="false">
          <ul class="menu-list-mobile-items">
            {{#if signed_in}}
              <li class="user-avatar-item item">
                {{#my_profile role="menuitem" class="my-profile"}}
                  {{user_avatar class="menu-profile-avatar"}}
                  <div class="menu-profile-name">
                    <div>{{user_name}}</div>
                    <div class="my-profile-tooltip">{{t 'profile'}}</div>
                  </div>
                {{/my_profile}}
              </li>
              <li class="item">{{link "requests" role="menuitem"}}</li>
              <li class="item">{{#link "contributions" role="menuitem"}}{{t "activities"}}{{/link}}</li>
              <li class="item">{{contact_details role="menuitem"}}</li>
              <li class="item">{{change_password role="menuitem" class='change-password'}}</li>
              <li class="nav-divider"></li>
            {{else}}
              <li class="item">
                {{#link "sign_in" role="menuitem"}}
                  {{t 'sign_in'}}
                {{/link}}
              </li>
              <li class="nav-divider"></li>
            {{/if}}
            <li class="item">{{link 'community' role="menuitem"}}</li>
            <li class="item">{{link 'new_request' role="menuitem" class='submit-a-request'}}</li>
            <li class="nav-divider"></li>
            {{#if signed_in}}
              <li class="item">
                {{link "sign_out" role="menuitem"}}
              </li>
            {{/if}}
            </li>
          </ul>
        </nav>
      </div>

    </header>
    0
  • Dave Dyson
    Zendesk Community Manager

    Hi Lisa,

    Thanks forthe code snippet. First, the error you're seeing is because you didn't quite grab enough code -- here's what you need to get (looks like you missed the last couple of lines -- each <div> needs to be balanced by a closing </div>, kind of like nested parentheses in ordinary text): 

    From there, moving that to the header is a little bit more complicated, and I'm sorry I implied it wasn't. I can show you pretty easily how to move it to the left of the user name and/or sign in link, but moving it to the right of that would require some additional styling or coding that's beyond the scope that I can help with (perhaps others in the community can help).

    The first thing you'll want to do is insert the code into the header, right after the line that says:

          <ul class="user-nav-list">

    It can be helpful too add some blank lines in the code before and after the code you just pasted in, so you can tell it apart form the rest of the code. 

    Then you're going to make a little edit to the first and last line of the code you pasted, changing "div" to "li":

    So the first line of the code you pasted will say:   <li class="footer-language-selector">

    And the last line will say:  </li>

    Save that, and your language dropdown should appear in the header. That's about the limit of the help I can provide, and I hope it helps!

     

    0

Please sign in to leave a comment.

Powered by Zendesk