Website header icons on mobile not on the same line (check photo attached)

Store Design
, , , ,
1

Kemagon_0-1683835877754.jpeg
Kemagon_0-1683835877754.jpeg750×1334 79.6 KB

Please help meI want normaly all the icons should appear in one line first the three navigation bars at full left then comes the sign up icon then logo in middle then search icon then the cart icon. That’s how it normally should be on phone but now it’s not like that, it’s the 2 icons on left are one under the other and same with the 2 on the right.

2

To align the navigation icons in one line on mobile, you can try the following steps:

  1. Open your Shopify admin and go to “Online Store” > “Themes”.
  2. Find your theme and click on “Actions” > “Edit code”.
  3. In the left sidebar, locate and open the “theme.scss.liquid” file under the “Assets” folder.
  4. Scroll to the bottom of the file and add the following CSS code:
@media screen and (max-width: 767px) {
  .site-nav__icon {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
  }
}
​
3

It didn’t work I pasted it and as you can see on https://otytech.com it’s still the same problem.