Need help with hiding menus of header Menus on desktop but visible on mobile

[Dan1213]

My store URL : danlo.in

I want to make some menus on my header hidden on desktop but visible on mobile. I have some menus as - home, men, women, kids, contact, sell with us. i want to hide contact and sell with us menu on desktop but shall be visible on mobile. if anyone knows how to do that, please help.

[Moeed]

Hey @Dan1213 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dan1213]

danlo.in

[Moeed · Accepted solution]

Hey @Dan1213 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
a#HeaderMenu-sell-with-us {
    display: none !important;
}
a#HeaderMenu-contact {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan1213]

Hey @Moeed 

How can I allow customers to upload a profile picture to replace the default login icon on the top right of my Shopify store. Ensure that their profile photo is visible only when they log in, otherwise it shall be a default icon.

[topnewyork]

Hi @Dan1213 , I hope you are doing well. Kindly share your store URL.

Thanks!

[topnewyork]

@Dan1213 kindly use 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>
@media (min-width: 768px) {
  #HeaderMenu-sell-with-us,
  #HeaderMenu-contact {
    display: none;
  }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[oscprofessional]

Hi @Dan1213 

Go to Shopify Admin -> Online Store ->Theme -> Edit code->base.css

Add this css code in the end of the base.css file.

@media (min-width: 989px) {
a#HeaderMenu-sell-with-us, a#HeaderMenu-contact {
    display: none;
}
}