The position of a hamburger icon is different on iPhone and Android devices.

Store Design
1

Recently I was changing the position of my header icons and realised that the hamburger menu icon goes beyond the screen boundaries on Android phone at the same time everything looks perfectly fine on Iphone..

Thats the first time I am facing an issue like that and I hope someone can lend me a hand.

Thanks in advance!!

Website name - apeya.co | Theme - Dawn

IMG_2734.jpeg
IMG_2734.jpeg1080×729 33.4 KB

IMG_2733.jpeg
IMG_2733.jpeg1125×506 17.4 KB

2

Hello @Apeya ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media(max-width: 989px){
    .header-wrapper {
    height: unset !important;
}

.header {
    position: unset !important;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    padding: 8px 15px;
    align-items: center;
    gap: 15px;
}

.menu-drawer-container {
    position: unset;
}

.header--mobile-left .header__heading {
    order: 1;
    flex: 1;
}

.header__icons a#cart-icon-bubble {
    right: unset !important;
    top: unset !important;
}

.header__icons {
    margin-right: 0 !important;
}

a.header__heading-link {
    position: unset;
}
}

ZestardTech_0-1736416272225.png
ZestardTech_0-1736416272225.png976×510 93.1 KB

Let me know if you need further assistance!

3

Thank you for reply, but unfortunately it didn’t help me(

Also I discovered that the problem might not be the icon positioning, but the fact that my site appears slightly ‘zoomed in’ for android users, which makes the icon look off the screen. Also a little white line shows up as soon as enter full screen mode.

If that can be solved somehow I will be very grateful!

please check the video on my google drive to understand the problem fully:

https://drive.google.com/file/d/11Xyxj62FmSfU0D5ppfOTYpNKDzAwpbxS/view?usp=drivesdk

4

Hello apeya,

Have you applied the CSS I shared with you? It works perfectly on both of my devices. Please review the CSS again, and if there’s any issue with the appearance on your device, make sure to resolve that first.

Let me know if you need further assistance!

Thank you.

5

Sorry, but that’s how the website header looks like with applied code:

IMG_2753.jpeg
IMG_2753.jpeg1080×493 19.8 KB

Do you have any ideas how to solve it?
Thanks