Header Mobile View Issue - Dawn Theme

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

On some mobiles it appears like this

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

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.

still not good