Hide menus on mobile but show on desktop

[Dan1213]

My Shop URL : DanLo

I’ve implemented custom coding in my store that allows specific menus to be hidden on the header when viewed on desktop but visible on mobile. Now, I need additional code to do the opposite—hide certain menus on the mobile header while ensuring they display perfectly on desktop.

Like i want to hide Men, Women, Kids, electronics, accessories, Home Decor & Kitchen Accessories.

[topnewyork]

Hi @Dan1213 , kindly share your store URL

Thanks!

[Dan1213]

danlo.in

[topnewyork]

@Dan1213  check the below code

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
    /* Hide specific menu items on mobile */
    @media only screen and (max-width: 767px) {
        #HeaderDrawer-men,
        #HeaderDrawer-women,
        #HeaderDrawer-kids,
        #HeaderDrawer-electronics,
        #HeaderDrawer-accessories,
        #HeaderDrawer-home-decor,
        #HeaderDrawer-kitchen-accessories {
            display: none !important;
        }
    }

    /* Ensure menu items are visible on desktop */
    @media only screen and (min-width: 768px) {
        #HeaderDrawer-men,
        #HeaderDrawer-women,
        #HeaderDrawer-kids,
        #HeaderDrawer-electronics,
        #HeaderDrawer-accessories,
        #HeaderDrawer-home-decor,
        #HeaderDrawer-kitchen-accessories {
            display: block !important;
        }
    }
</style>

[Dan1213]

Home Decor & Kitchen Accessories       it is together so edit the code accordingly

[topnewyork]

This is what you wanted? right? if so, my above code will work well with this.

[hvjjfghh8]

I was looking for it and this code really worked as i wanted for my site.