How can I modify mobile navigation menu width and arrow icons?

Technical Q&A
1

Hi,

I wanted to know if it’s possible for me to make the mobile nav menu full screen instead of 3/4 like the example below.

i would also like to change the icon to an arrow like below (and add line dividers if possible) as opposed to how Shopify standard is. Is this possible?

my store url: webse.co.uk

my theme: dawn

mine:

slatty_1-1657452231288.png
slatty_1-1657452231288.png1284×2778 223 KB

how I want it to look:

slatty_0-1657452163521.png
slatty_0-1657452163521.png1284×2778 185 KB

1 Like
2

@slatty

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-menu-drawer.css ->paste below code at the bottom of the file.
.menu-drawer {width: 100% !important;}
1 Like
3

Amazing thank you @KetanKumar !

Do you know how I can change the arrow & add lines between each item?

1 Like
4

@slatty

can you please add this code

.js .menu-drawer__menu li {
border-bottom: 1px solid #fff;
}
1 Like
5

Amazing thanks @KetanKumar !

Do you know how I can change the arrows to a more appealing icon please?

1 Like
6

@slatty

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

1 Like
7

I have just tried to message you but it won’t let me. Please could you send me a message & I will reply. Thanks @KetanKumar

1 Like
8

@slatty

yes, sure i will send message and let you know

9

Hey, could you please provide the solution here?