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
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:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
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.
Hi @munfas_uk ,
I checked and you only imported font ‘Source Code Pro’, did you import font ‘Source Sans Pro Black’?
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.
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!
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.
This solution works too for me on the Dawn v14.0 version. thanks
This works on Dawn 14.0 version. Thanks