MOTION THEME - Side Menu drawer - How to change text styling?

[lion_no]

Trying to figure out how to change the design on the side menu drawer, and it seems like all settings under "Typography" are ignored when using the "Drawer" option.

This is how it currently looks like:

I'd like to change the font, text size, letter spacing, line height of this text - as it doesn't appear to be an option in the GUI.
(Might need a separate option for mobile and desktop)

Additionally, if possible (since there's lots of room on the top of the menu, add logo to it?

Here's a preview link
 https://t8n43rstgq4tsegu-50647859379.shopifypreview.com/

[dmwwebartisan]

@lion_no 

This is code customization work Contact to your theme developer OR support.

Thanks!

[lion_no]

@dmwwebartisan I can understand that the logo might be a code customization work, but the text styling / formatting shouldn't be anything more than a code adjustment the theme.css.liquid as far as I understand? 

[suyash1]

@lion_no- if you have multiple changes then you can contact me on my email and we can make changes one by one

[lion_no]

@suyash1 

Changing font size is most likely enough, the rest of the options are a example of missing functions.

[suyash1]

@lion_no- to change font size, please add this css to the very end of your theme.css file and check, this current code will reduce font size

@media only screen and (min-width:590px){
.mobile-nav__item .mobile-nav__faux-link{font-size: 20px;}
}

[lion_no]

@suyash1 thanks, but unfortunately it didn't work for all of it 😕

Both subcategories and "ACCOUNT" is still using the large font

[suyash1 · Accepted solution]

@lion_no- add all this css

@media only screen and (min-width:590px){
.mobile-nav__item .mobile-nav__faux-link, .mobile-nav__item a:not(.megamenu__promo-link) {
    font-size: 20px;}
}

[lion_no]

That worked perfectly, thank you @suyash1! 🙂

[suyash1]

@lion_no- welcome

[HELDERWRLD]

Hey @suyash1 

How can we do it in 2023?
I also want to change text size on my dawn theme

https://diversusoficialsite.myshopify.com/
pass: diversusoficial

[suyash1]

@HELDERWRLD  hello, which text size do you want to change?

[HELDERWRLD]

All these text on mobile and desktop 

[suyash1]

@HELDERWRLD - please add this css to the very end of your base.css file and check, adjust the number as per the need

.list-menu__item{font-size: 22px !important;}

[HELDERWRLD]

The max it goes is like 14px, i want even smaller, what can i do?

[suyash1]

@HELDERWRLD - adjust number 22 in above css to 12 or 10 and check

[HELDERWRLD]

Already did, even to 5px, didn't change a bit. Only goes up, but not down

[suyash1]

@HELDERWRLD - it is like this, it has changed

[HELDERWRLD]

It worked now, maybe had a quick bug but it works fine now.

Thank you so much.

I have one more question please. How can i make my menu to open only halfway on mobile? Mine opens full screen and covers the rest of the website.

Want it like this: 

[suyash1]

@HELDERWRLD - add this css and check

@media screen and (max-width:749px){
.menu-drawer{max-width: 70%;}
}

[HELDERWRLD]

It works, damn you are amazing.

Thank you so much for your help!

Any tips on how to put the search on the menu and change the search icon on the header to the login icon? Mobile only.

Also would like to remove the arrows on my menu on mobile and desktop

[suyash1]

@HELDERWRLD - to remove arrows on menu, please add this css.

.menu-drawer__menu-item>.icon-arrow{display:none; visibility:hidden;}

to add search to menu it will need code editing, it is not a task of single line or two and it can break search functionality, hence I recommend not to do it

[HELDERWRLD]

It worked, thank you!

Change the icon on the header would also break it?

[HELDERWRLD]

Or at least make the search and cart smaller and add the login on it

[suyash1]

@HELDERWRLD - hello, sorry for the late reply, it will also need code editing

[HELDERWRLD]

I already found a code that does the trick. Could you please help me fix the size of the icons?

They are too big and with a lot of space in between, my logo moved because of this.

I would like it to be like this: 

[suyash1]

@HELDERWRLD - try this css and check

@media screen and (max-width:749){
.header{padding: 2px 1rem 2px 1rem;}
.header__search{margin-right: -20px;}
.header .header__icon--account{margin-right: -20px;}
}

[HELDERWRLD]

Hello @suyash1 

It didn't work. Still the same space. Added the code on base.css

[Winnne0195]

Hello @suyash1 ,

I am facing kind of the same problem. The text size of my mobile navigation is too big. I already changed the navigation text size in theme settings, but it does not work on mobile nav. I also tried the above solutions but it didn't work. How can I get a smaller text size? See screenshot.

[suyash1]

@Winnne0195 - can you please share your website link?

[Winnne0195]

Thank you for your reply.

The link is: https://groupedamis.com

[suyash1]

@Winnne0195 - please add this css to the very end of your theme.css file and check, adjust number 12 as per the need

a.mobile-nav__link {font-size: 12px !important;}

[Winnne0195]

Thank you, that worked!

Do you also have a solution to remove the black lines between the menu links? I only want a line above ''LOG IN''.

[suyash1]

@Winnne0195 - it will remove all as login also shares the very same css class as other items

[Winnne0195]

How do I do that? I would like to have it like this. So, no lines between first menu links, only above and below ''Log in''. And less space between links.

[suyash1]

@Winnne0195 - try this css and check

.mobile-nav__item:after{display:none; visibility:hidden;}
li.mobile-nav__item.appear-animation.appear-delay-7 {
border-top: 1px solid #000;    border-bottom: 1px solid #000;}
.drawer__header {border-bottom: none !important;}

[Winnne0195]

Perfect, thank you @suyash1 !