Solved

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

slatty
Explorer
56 0 12

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

 

how I want it to look:

 

slatty_0-1657452163521.png

 

 

Accepted Solution (1)
KetanKumar
Shopify Partner
36904 3641 11986

This is an accepted solution.

@slatty 

yes, sure i will send message and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36904 3641 11986

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
slatty
Explorer
56 0 12

Amazing thank you @KetanKumar !

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

KetanKumar
Shopify Partner
36904 3641 11986

@slatty 

can you please add this code 

.js .menu-drawer__menu li {
border-bottom: 1px solid #fff;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
slatty
Explorer
56 0 12

Amazing thanks @KetanKumar !

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

KetanKumar
Shopify Partner
36904 3641 11986

@slatty 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
slatty
Explorer
56 0 12

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 

KetanKumar
Shopify Partner
36904 3641 11986

This is an accepted solution.

@slatty 

yes, sure i will send message and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
varun111
Visitor
1 0 0

Hey, could you please provide the solution here?