Hello everyone
I want to make the font size of the text in the red frame in the picture larger without changing the size of other texts
How can I do it?
Thanks
Topic summary
A Shopify theme customization question about increasing the font size of a specific menu item in the header navigation without affecting other text elements.
Problem: User wants to enlarge text within a red-framed area (identified as ‘hat-journey’ menu item) while keeping other menu text unchanged.
Solutions provided (3 responses):
- Option 1: Add CSS targeting
div#SiteNavLabel-hat-journey *with desired font-size to theme.css - Option 2: Similar approach using theme.scss.css with
!importantflag for specificity - Option 3: More specific selector targeting
div#SiteNavLabel-hat-journey li a spanfor precise control
All solutions involve adding custom CSS code to theme files. Respondents included screenshots demonstrating the implementation and results. The issue appears resolved with multiple working approaches offered.
You can do that by pasting this code at the bottom of your theme.css file.
div#SiteNavLabel-hat-journey * {
font-size: 16px;
}
Hello @sin034
Go to online store ----> themes ----> actions ----> edit code ----> theme.scss.css
add this code at the end of the file and save.
div#SiteNavLabel-hat-journey * {
font-size: 16px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @sin034 ,
Please add the below class in either one of the file - theme.css or base.css
.div#SiteNavLabel-hat-journey li a span {
font-size: 20px;
}
Note: You can increase or decrease the number before the px according to your needs.
And it will work. Also, if you stuck somewhere, please let me know I am more than happy to help.