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

[HCM15]

hello is there a way tp change both at the same time? TIA https://campomadero.com/ using studio theme

[TheUntechnickle]

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

[HCM15]

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

[Made4uo-Ribe]

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!

[HCM15]

this worked thank you!