Is there a way to enlarge and bold the font on the red banner at the top of my website? I would also like to make the menu page links larger (“Home” “Products” etc.)
website is https://masteryourbalance.com/ password “masteradmin”
Topic summary
A user seeks to enlarge and bold text in two areas: the red announcement banner at the top of their Shopify store and the navigation menu links (Home, Products, etc.).
Solutions Provided:
- For the announcement bar: Add CSS code to
base.csstargeting.announcement-bar__messagewith increased font-size and font-weight. This solution worked successfully. - For the navigation menu: Two CSS solutions were offered targeting
.header__menu-item spanand.site-nav__link, but neither produced visible changes despite correct insertion. - An alternative suggestion was the EasyEdits app, but it changed fonts site-wide rather than just the targeted elements.
Current Status:
The announcement bar issue is resolved, but the navigation menu text size remains unchanged. The user has correctly inserted the provided CSS code (as shown in a screenshot), but it’s not taking effect, suggesting possible theme-specific selector issues or CSS specificity conflicts. The discussion remains open with the navigation menu problem unresolved.
Hello,
For the announcement bar go to online store then edit code and open your base.css file and paste the following code and save. You can play around with the size of the font to your desired value.
.announcement-bar__message {
font-weight: 900 !important; font-size: 25px !important;}
}
1 Like
Hello,
For the navigation menu go to online store then edit code and open your base.css file and paste the following code and save. You can play around with the size of the font to your desired value.
.header__menu-item span {
font-size: 25px !important;}
}
The announcement bar code worked perfectly, thank you so much! The navigation menu code does not appear to be making changes, even when I adjust the px values. Did I insert it incorrectly?
Yes! You can increase the font size and bold the text on your red banner, as well as make the menu links larger, by adding some custom CSS.
Steps:1. Go to your Shopify admin > Online Store > Themes.
-
Click Actions > Edit Code on your active theme.
-
Open theme.css or base.css (whichever your theme uses).
-
Add the following CSS at the bottom of the file:
/* Make the red banner text larger and bold */ .announcement-bar { font-size: 18px; /* Adjust as needed */ font-weight: bold; } /* Increase menu link size */ .site-nav__link { font-size: 16px; /* Adjust as needed */ font-weight: bold; }
- Save your changes and refresh your site to see the updates.
Try EasyEdits for Simple Store Customizations
I’m the developer of EasyEdits—a Shopify app that lets you make quick, easy store changes without coding. It’s free to try, and you keep your edits even if you don’t subscribe!
The code did not work, do I need to format it differently? Also, I tried to use the EasyEdits app but it changed the font style for my entire website, which I do not want. I do not see a way to change that within the EasyEdits app.