can I change the font and size of the menu and bag?

can I change the font and size of the menu and bag?

HCM15
Tourist
41 0 8

hello is there a way tp change both at the same time? TIA https://campomadero.com/ using studio themeCaptura de pantalla 2025-01-28 a la(s) 8.12.54 a. m..png

Replies 4 (4)

TheUntechnickle
Shopify Partner
294 31 86

Hey @HCM15,

To change the font and size of the menu and bag text in your header, you can add the following CSS to your theme's base.css file or a custom CSS file. This CSS targets the menu items in the header and the cart icon text.

 
/* Change font and size for menu items */
.header__heading-link,
.menu-drawer__menu-item,
.header__icon--cart {
    font-family: 'Your Desired Font', sans-serif !important; /* Replace with your desired font */
    font-size: 16px !important; /* Adjust the size as needed */
    font-weight: normal !important; /* Adjust the weight as needed */
}

/* Specific targeting for the cart/ bag text */
.header__icon--cart {
    font-size: 14px !important; /* Adjust the size as needed */
    font-weight: bold !important; /* Adjust the weight as needed */
}

Steps to Add the CSS:

  1. Access Your Theme Files:

    • Go to your Shopify admin dashboard.

    • Navigate to Online Store > Themes.

    • Find your current theme and click Actions > Edit code.

  2. Locate the CSS File:

    • In the left-hand sidebar, scroll down to the Assets section and click on base.css (or your custom CSS file) to open it.

  3. Add the CSS Code:

    • Scroll to the bottom of the file and paste the CSS code provided above.

    • Replace 'Your Desired Font' with the actual font name you want to use. If it's a custom font, make sure it's loaded in your theme.

  4. Save the Changes:

    • Click Save in the top-right corner to apply the changes.


This should update the font and size of the menu and bag text in your header. If you need further customization or run into any issues, feel free to DM and ask! 

Cheers!
Shubham | Untechnickle

Helping for free: hello@untechnickle.com


Don't forget to say thanks, it'll make my day - just send me an email! 


Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App

HCM15
Tourist
41 0 8

hello! this only changed bag, not menu, how can I change menu now to match bag? TIA

Made4uo-Ribe
Shopify Partner
9885 2354 2953

Hi @HCM15 

Its seems like you add the size of the bag already. 

Made4uoRibe_0-1738100681798.png

For the menu you need to add the font-size on the code you add in the base.css

Made4uoRibe_1-1738100752958.png

Just add like this.

Made4uoRibe_2-1738100786095.png

 

.header__icon--menu:before {
content: "Menu" !important; 
color: #000 !important; 
position: inherit !important; 
font-size: 16px;
}

 

And Save. 

Result:

Made4uoRibe_3-1738100859807.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
HCM15
Tourist
41 0 8

this worked thank you!