I would like to change the font of a single nav item. I know how to change the font of all nav text, but I haven’t been able to target a single nav item. I would like “Others We Love” to be in the font Melatti. Any help would be greatly appreciated!
Site: blairritchey.com
This changes all nav text
.navtext {
font-family: “Melatti”;
text-transform: capitalize;
font-size: 1.3em;
}
This didn’t work
span.Others.We.Love.navtext {
font-family: “Melatti”;
text-transform: capitalize;
font-size: 1.3em;
}
Hi @annescafaro
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Noah | PageFly
1 Like
Hi Noah,
Thanks very much for help!
It worked, but the .navlink–grandchild .navtext changed as well (screenshot below). Is there way to target that text with CSS. I’ll adjust the font/font-size.
Thanks!
Hi, please help me replace the code above with this new one.
With this code it won’t affect the dropdown menu
1 Like
Thanks for the quick reply! This didn’t affect the dropdown menu, but for some reason only font-size changed. The text-transform and font-family didn’t change.
Hi @annescafaro Sorry for my late response, please replace the code above with this one
Should be like this :
1 Like
Thanks so much. It worked PERFECTLY.
Glad that i can help. Let me know if you need have any questions
Thanks Noah!
I have a quick question … Is there an app you prefer for mega menu customization?
For example, I like the way this the mega menu works on this theme:
https://themes.shopify.com/themes/focal/styles/quartz/preview
The Broadcast theme has a mega menu, but we don’t like how it works on mobile.
Hi @annescafaro There’s a fews app i can see lot of user using it is
-
Globo Mega Menu, Navigation
-
Mega Menu Pro ‑ Drag & Drop
-
qikify Smart Menu ‑ Mega Menu
-
Buddha Mega Menu & Navigation
You can search it on the Shopify app store and see which app is appropriate for you. And app will work mostly for all the theme.
1 Like
Great, I’ll check them out.
In the meantime, any suggestions for changing the current menu font on mobile? And specifically targeting that tricky “Others We Love” tab again?
Yes, let me know which font you want to change it to and which style for it. I will write a new code for you will include the mobile settings
We would like the mobile nav to match the desktop nav.
font-family: synthese,sans-serif;
font-weight: 300;
text-transform: capitalize;
font-size: .9em;
line-height: 1.5em;
letter-spacing: 0;
The only nav item that will be different is “Others We Love”.
font-family: “Melatti”;
text-transform: capitalize;
font-size: 1.5em;
Hi @annescafaro Sorry for my late response. Please help me to replace the code above with this one:
1 Like
It should be in the theme.liquid And you can delete the old one
and replace it with the new one
1 Like
