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

Solved

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

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
10130 1253 1593

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

 

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 36 (36)

dmwwebartisan
Shopify Partner
12323 2552 3732

@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
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
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
10130 1253 1593

@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;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
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
10130 1253 1593

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

 

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
lion_no
Explorer
58 6 19

That worked perfectly, thank you @suyash1! 🙂

suyash1
Shopify Partner
10130 1253 1593

@lion_no- welcome

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

Screenshot 2023-10-28 at 2.30.17 PM.png

All these text on mobile and desktop 

suyash1
Shopify Partner
10130 1253 1593

@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

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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

 

suyash1
Shopify Partner
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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

suyash1
Shopify Partner
10130 1253 1593

@HELDERWRLD - it is like this, it has changed

 

suyash1_0-1698501019260.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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
10130 1253 1593

@HELDERWRLD - add this css and check

 

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

 

suyash1_0-1698501457070.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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
10130 1253 1593

@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

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

It worked, thank you!

Change the icon on the header would also break it?

HELDERWRLD
Explorer
146 0 8

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

suyash1
Shopify Partner
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

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
10130 1253 1593

@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;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
HELDERWRLD
Explorer
146 0 8

Hello @suyash1 

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

IMG_884A5C2AC60C-1.jpeg

Winnne0195
Excursionist
28 1 3

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.

Mobile nav.png

suyash1
Shopify Partner
10130 1253 1593

@Winnne0195 - can you please share your website link?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Winnne0195
Excursionist
28 1 3

Thank you for your reply.

 

The link is: https://groupedamis.com

suyash1
Shopify Partner
10130 1253 1593

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

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Winnne0195
Excursionist
28 1 3

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
Shopify Partner
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Winnne0195
Excursionist
28 1 3

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.

Mobile nav.png

suyash1
Shopify Partner
10130 1253 1593

@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;}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Winnne0195
Excursionist
28 1 3

Perfect, thank you @suyash1 !