A user asked how to simultaneously change the font and size of both the menu and shopping bag elements in their Shopify store’s header (using Studio theme).
Initial Solution:
A CSS code snippet was provided to add to the theme’s base.css file, targeting header elements including .header__heading-link, .menu-drawer__menu-item, and .header__icon--cart.
Issue Encountered:
The initial code only modified the bag element, not the menu text.
Final Solution:
An additional CSS rule was needed specifically for the menu:
.header__icon--menu:before {
content: "Menu" !important;
color: #000 !important;
position: inherit !important;
font-size: 16px;
}
This targeted the menu’s pseudo-element to apply the desired font size, matching the bag styling.
Status: Resolved. The user confirmed the solution worked successfully.
Hi @HCM15
Its seems like you add the size of the bag already.
For the menu you need to add the font-size on the code you add in the base.css
Just add like this.
.header__icon--menu:before {
content: "Menu" !important;
color: #000 !important;
position: inherit !important;
font-size: 16px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
