Enhancing Mobile User Experience: Changing Dropdown Menu and 'Main Category' Appearance in DAWN

Store Design
, , , ,
1

Currently, on the mobile version of my website, when I try to click ‘Main Category,’ I have to do so very precisely because ‘Main Category’ is not wrapped in a button. I would like ‘Main Category’ to be wrapped in a button, making it easier for customers to click on their destination. Furthermore, when I click the dropdown menu arrow in the mobile version, the arrow is also not wrapped in a button.

I want to change the appearance of the dropdown menu in the Shopify Dawn theme for the mobile version so that it points downwards, not to a new menu, and so that the arrow is also wrapped in a button in the mobile version.

Could anyone please provide guidance or instructions for making these changes on the mobile version? I aim to achieve a more intuitive and user-friendly appearance for my website on mobile devices.

I have included an example of what I’m hoping to achieve

part1.png
part1.png885×582 7.77 KB

part2.png
part2.png897×1053 32.8 KB

.

Thank you for your assistance.

2

I’ve had a change of perspective regarding the button aspect. Instead, I’d like to concentrate on improving the appearance of the dropdown menu as I mentioned earlier.

Could you kindly assist me in making this happen? Your guidance would be greatly appreciated.

3

Ive tried to do threads, write to support, search apps for months. I guess we’ve to buy a theme for this function lo

4

Try by adding below line of code CSS.

.js .menu-drawer__navigation .submenu-open {

visibility: visible !important;

}

.js .menu-drawer__submenu {

position: static !important;

visibility: visible !important;

transform: translate(0) !important;

}

body .menu-drawer__close-button {

display: none;

}

2 Likes
5

I’m truly impressed by the amazing assistance from the Webwondersco team! They’ve helped me achieve the dropdown submenu I’ve longed for. When I click the main category, the dropdown menu appears right below it like magic. Their response was lightning-fast, and they completed the task incredibly quickly. I, the one they’ve assisted, am genuinely proud of the outcome! Thank you, Webwondersco, you’re web heroes!

1 Like
6

Appreciated it !

7

Thanks,

where? theme.liquid?

8

For my theme dawn in base.css

9

Wow, thanks. It doesnt work for me though.

doenstseemtowork.PNG
doenstseemtowork.PNG1619×992 50.5 KB

10

I added at last block

11

I’ve dawn theme as well, doesnt work for me to put it in the last block either. Guess I just have to buy Impulse-theme.. for one function :disappointed_face: Thanks for the help though

12

@Killyss is it possible for you to send me a screenshot? I tried a lot of different ways..

13

Nvm. I wanted the “dropdown” you got.. I’ve a arrow → I want the down one.. How did you get it?

14

@Killyss Thank you so much for your kind words! :slightly_smiling_face:

15

Yes, in theme.liquid or base.css file