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

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.

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


Hope this answer helps.

Best regards,

Victor | PageFly

1 Like

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

  1. Open your theme.liquid theme file

  2. Paste the below code before


*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

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.

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.

1 Like

Hi @munfas_uk ,

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

1 Like

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. :black_heart:

1 Like

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!

1 Like

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. :black_heart:

1 Like

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

This works on Dawn 14.0 version. Thanks