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

Solved
lion_no
Explorer
58 6 19

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:

lion_no_0-1634732137176.png

 

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/

Accepted Solution (1)
suyash1
Shopify Partner
8656 1062 1406

This is an 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;}
}

 

suyash1_0-1634780395100.png

 

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂

View solution in original post

Replies 27 (27)
dmwwebartisan
Shopify Partner
12264 2544 3677

@lion_no 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
lion_no
Explorer
58 6 19

@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
Shopify Partner
8656 1062 1406

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
lion_no
Explorer
58 6 19

@suyash1 

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

suyash1
Shopify Partner
8656 1062 1406

@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;}
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
lion_no
Explorer
58 6 19

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

lion_no_1-1634756205104.png


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

suyash1
Shopify Partner
8656 1062 1406

This is an 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;}
}

 

suyash1_0-1634780395100.png

 

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
lion_no
Explorer
58 6 19

That worked perfectly, thank you @suyash1! 🙂

suyash1
Shopify Partner
8656 1062 1406

@lion_no- welcome

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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
Shopify Partner
8656 1062 1406

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

Screenshot 2023-10-28 at 2.30.17 PM.png

All these text on mobile and desktop 

suyash1
Shopify Partner
8656 1062 1406

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

 

suyash1_0-1698500439055.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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

 

suyash1
Shopify Partner
8656 1062 1406

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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

suyash1
Shopify Partner
8656 1062 1406

@HELDERWRLD - it is like this, it has changed

 

suyash1_0-1698501019260.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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: IMG_2B9A312D85F9-1.jpeg

suyash1
Shopify Partner
8656 1062 1406

@HELDERWRLD - add this css and check

 

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

 

suyash1_0-1698501457070.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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
Shopify Partner
8656 1062 1406

@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

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

It worked, thank you!

Change the icon on the header would also break it?

HELDERWRLD
Excursionist
77 0 4

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

suyash1
Shopify Partner
8656 1062 1406

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

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: IMG_DD96D0330AD2-1.jpeg

suyash1
Shopify Partner
8656 1062 1406

@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;}
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
HELDERWRLD
Excursionist
77 0 4

Hello @suyash1 

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

IMG_884A5C2AC60C-1.jpeg