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

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>

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!