Solution for a mobile icon for languages:

[sysadmin-info]

steps to make it work:

go to root_directory/themes/zzo

copy assets and layouts to your root directory. Why? Well this way even if there will be an update for the zzo theme it will not override change. Why? Well because if you store assets, layouts , resources, archetypes etc. in your root directory it is more important (override settings from the theme directory) and that is what we want to achieve.

OK now the crucial part

Go to your root_directory/layouts/partials/navbar

Copy the language-icon.html to language-icon-mobile.html

I tried to keep the pattern as logical as it is possible. (see the other files in this directory and you will understand why I did it this way - I mean patterns in names).

Then edit the language-icon-mobile.html file and change this

<div class="theme">

to this

<div class="theme lang-mobile">

Then go to root_directory/assets/sass/layout

Edit the file _navigation.scss

Find this part

.theme-mobile {
  display: none;
  outline: none;
  position: absolute;
  top: 0;
  right: 35px * 2;
  width: 35px;
  height: $grid_navbar_height;
  cursor: pointer;
  z-index: z('modal');

  &[data-ani="true"] {
    @include animation('slide-in-down .5s .4s 1 ease both');
  }

  @media only screen and (max-width: 769px) {
    @include flexbox();
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
}

copy it and paste below

and then change the name to lang-mobile. It should look like this

.lang-mobile {
  display: none;
  outline: none;
  position: absolute;
  top: 0;
  right: 55px * 2;
  width: 35px;
  height: $grid_navbar_height;
  cursor: pointer;
  z-index: z('modal');

  &[data-ani="true"] {
    @include animation('slide-in-down .5s .4s 1 ease both');
  }

  @media only screen and (max-width: 769px) {
    @include flexbox();
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
}

See that additionally I changed this

right: 55px * 2;

Value is changed from 35 to 55. Why? Well, the answer is quite simple: icons were in the same place, so it was hard to use it, so I had to move it to the left to be able to see it and use it as needed.

In file layouts/partials/navbar/select-theme-mobile.html the div should look like below:

<div class="dropdown-content select-theme">
      {{ if .Site.Params.themeOptions }}
        {{ range $index, $value := .Site.Params.themeOptions }}
        <a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
                {{ i18n (print "skin-" .) | default . }}
        </a>
        {{ end }}
      {{ end }}
    </div>

See my website: sysadmin where I am using the zzo theme and have mobile icon for changing languages working.