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

[munfas_uk]

 

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.

[PageFly-Victor]

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>

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

Hope this answer helps.

Best regards,

Victor | PageFly

[munfas_uk]

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

[Litos]

Hi @munfas_uk,

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

[munfas_uk]

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 · 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!

[munfas_uk]

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]

This works on Dawn 14.0 version. Thanks

[ttaenang]

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

[GemPages]

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

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

[Litos]

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.