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

Store Design
, ,

Topic summary

Goal: Hide specific header menu items on desktop while keeping them visible on mobile.

Context and inputs:

  • Helpers requested the store URL/password; the URL was provided (danlo.in).

Proposed solutions:

  • Concrete CSS fix: add a media query in base.css to hide only on desktop: @media (min-width: 989px) { a#HeaderMenu-sell-with-us, a#HeaderMenu-contact { display: none; } }. This targets links by ID and applies at desktop widths (media query = CSS rule that triggers based on screen size).
  • Other replies suggested adding code in theme.liquid (before or ), but the actual code wasn’t visible in the posts; one included a screenshot.

Outcome/status:

  • No confirmation from the store owner that the desktop-only hide worked; resolution not confirmed.

Latest update/new question:

  • The store owner asked how to allow customers to upload a profile picture to replace the default login icon, shown only when logged in. No responses yet; remains open.

Notes:

  • Correct IDs/classes must match the theme’s markup for the CSS to work. Code snippets and a screenshot are central to understanding the implementation.
Summarized with AI on December 21. AI used: gpt-5.
1

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.

2

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

3

danlo.in

4

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

Thanks!

5

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 tag

RESULT:

Moeed_0-1724681637329.png
Moeed_0-1724681637329.png1520×874 202 KB

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

Best Regards,
Moeed

1 Like
6

@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

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

Thanks!

7

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;
}
}
8

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.