how to change font only on dropdown menu mobile (dawn theme)

Solved

how to change font only on dropdown menu mobile (dawn theme)

munfas_uk
Explorer
69 0 10

3834D772-70D8-4DC1-84C2-190C5E8F4D78.png

I’m needing to change the font only in the dropdown menu for mobile. it would be highly appreciated if someone could help us. Thank you.

 

Accepted Solution (1)
Litos
Globetrotter
688 169 146

This is an accepted solution.

Hi @munfas_uk,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

 

.menu-drawer__menu-item {
    font-family: var(--font-body-family) !important;
    font-weight: 600 !important;
}

 

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 10 (10)

PageFly-Victor
Shopify Partner
7865 1785 3079

Hi @munfas_uk 

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

 

PageFlyVictor_0-1676340246023.png

 

<style>
.js .menu-drawer__menu li {
   font-family: fantasy !important;
}
</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

munfas_uk
Explorer
69 0 10

Thank you for a quick response. When i change the font code from 'fantasy' to 'Source Sans Pro Blackit doesn't work. It seems to just change to a default font. Please could you help me fix the code thank you.

Litos
Globetrotter
688 169 146

Hi @munfas_uk,

I checked and you only imported font 'Source Code Pro', did you import font 'Source Sans Pro Black'?

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
munfas_uk
Explorer
69 0 10

Thank you for a quick response. I want the Menu font to be either Source Sans Pro Black or Source Sans Pro bold. When i use the code ".menu-drawer__menu-item { font-family: "Source Code Pro", sans-serif; " its changed the font to a completely different font? How would i solve this? I have added the code to my base.css anyway so please check my website if i have added it right. Thank you your help is very much appreciated. 🖤 

Litos
Globetrotter
688 169 146

This is an accepted solution.

Hi @munfas_uk,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

 

.menu-drawer__menu-item {
    font-family: var(--font-body-family) !important;
    font-weight: 600 !important;
}

 

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
munfas_uk
Explorer
69 0 10

Thank you this worked! I added the code to 'competent-menu-drawers.css' instead of 'base.css' because it wouldn't work in that file. it worked perfectly when i move it. Thank you for the code & the help. Its much appreciated. 🖤 

ttaenang
Shopify Partner
5 0 0

This works on Dawn 14.0 version. Thanks

ttaenang
Shopify Partner
5 0 0

This solution works too for me on the Dawn v14.0 version. thanks

GemPages
Shopify Partner
5624 1261 1231

Hello @munfas_uk ,

 

It's the GemPages Support Team and we are glad to assist you today!

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1676345249118.png


2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
.menu-drawer__navigation .menu-drawer__menu-item {
 font-family: 'font-name' !important;
}
</style>

*Please change the font-name by the name of the font that you want to use.

 

Let us know how it works for you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Litos
Globetrotter
688 169 146

Hi @munfas_uk,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.menu-drawer__menu-item {
    font-family: "Source Code Pro", sans-serif;
}

You can manually change the font name to your liking, it will work fine in mobile.

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.