enableAppbarLangIcon Mobile View

[Alextrapixel]

I set enableAppbarLangIcon = true in params.toml the language button shown in desktop view but mobile view didn't. Is anything wrong? Thanks

[sysadmin-info]

Probably the scss or css code is missing for mobile and that is why. Will have to figure it out and maybe will find the solution. I was a web developer a long time ago and know css pretty well.

[sysadmin-info]

So far after analysis of this complex theme I have found that it contains two files called theme and theme-mobile or something like that. They contain the css code. I need to spend more time to understand how it works. If I understand correctly, it should be done by analogy, I mean lang and lang-mobile. And then it has to be defined (for now I have to no idea yet where) in some file to work the way, that it takes the class and changes the value for the language icon depending on the width of the screen. It was a long time ago, when I was creating CSS styles using @media to make responsive web design websites. I hope I will figure it out sooner or later how to do it the correct way.

[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.