I want my tablet header as same as the mobile header in Dwell theme

Store Design
, , , , , , ,
1

Hi everyone,

I’m using the Dwell theme for my Shopify store canbetelgeuse.com

Currently, the desktop header with hover menu is showing on tablet/iPad view (especially in landscape mode). However, hover-based dropdowns don’t work well on touch devices like tablets. So, I want the tablet view to display the same header as the mobile version, which includes the hamburger menu instead of the desktop menu.

What I want:- On mobile and tablet: Show the mobile hamburger menu (fully functional on touch).

Screenshot_13.png
Screenshot_13.png671×942 222 KB

Screenshot_14.png
Screenshot_14.png1919×954 259 KB

Screenshot_15.png
Screenshot_15.png649×892 372 KB

  • On desktop: Keep the existing desktop menu as-is.

This would make the navigation much more user-friendly on tablets, where hover doesn’t work properly.

Could someone guide me on how to:

  1. Force the mobile header to show on tablet screen sizes?

  2. Or, change the media query/CSS or liquid file to apply the mobile header for tablets as well?

Any help would be appreciated! Thank you in advance :blush:

2

Hey, I understand your requirments. This task is related to the media Query. Currently the media Query is assign on 750px and we need it for max-width: 991px. In order to change this you need to go the styles.css file and here you need to find the header class and define a new media Query that has max-width: 991px.

If you could share the collab code in the p/m then I can help with that.

Thanks

1 Like
3

can you please tell me here or ask trhe nexact code file so i can share the file with you

4

Please share the styles.css code in the zip file or in .txt form.

Thanks

5

https://gist.github.com/Sumayah-Islam-tuly/f274fe95bb61b002208cea3eca0cf854

this is the base.css code

https://gist.github.com/Sumayah-Islam-tuly/250b4ff92cfe1203746db79f8cd9bed0

and trhis one is header.liquide code