Header Mobile View Issue - Dawn Theme

Store Design
1

Hello,

I have an issue with my header icons on mobile view

www.yogaspirit.mu

On all iPhone my search icon appears on top of the drawer menu

TBS2023_0-1743425950053.jpeg
TBS2023_0-1743425950053.jpeg185×400 13.2 KB

On some mobiles it appears like this

TBS2023_1-1743425950239.jpeg
TBS2023_1-1743425950239.jpeg185×400 11 KB

TBS2023_2-1743425950387.jpeg
TBS2023_2-1743425950387.jpeg179×400 9.49 KB

Can you please help to keep it fixed on all types of phone

2

Hi @TBS2023 This issue is due to z-index conflicts or improper positioning in your theme’s CSS.

In the CSS file of the theme in the online Store of Shopify Admin paste the below CSS.

@media screen and (max-width: 768px) {
    .header__search {
        position: absolute;
        right: 50px; /* Adjust as needed */
        z-index: 5;
    }

    .header__icon {
        z-index: 10; /* Ensure it's above the search */
        position: relative;
    }

    .drawer-menu {
        z-index: 20; /* Ensure it stays on top */
    }
}

Please let me know if this works for you.

3

still not good