What's your biggest current challenge? Have your say in Community Polls along the right column.

Need to make a menu/header bolder or bigger

Need to make a menu/header bolder or bigger

radaApeta
Explorer
64 0 23

Hello,

i need to make header/menu a little big bigger or bolder, so it would match more my website. Can someone help me with this ?

Thank you 

https://www.pickupstore.cz/
2611.png

valenta14
Replies 4 (4)

rajweb
Shopify Partner
387 36 52

Hey @radaApeta ,

To correctly adjust the header/menu to make it a bit bigger and bolder for your website, you can apply the following CSS rules. These changes will apply to both the font size and weight to make the text more prominent, and increase the spacing for a cleaner look

add this code:

.list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
    font-weight: bolder;
}

 

result:

 

Screenshot 2024-10-24 175739.png

 

 

Once you apply this CSS to your header, it should make the header/menu more prominent, matching the bold look you're aiming for.

 

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

GTLOfficial
Shopify Partner
666 140 133

Hello @radaApeta 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.header__menu-item {
font-size: 16px !important;
font-weight: 700 !important;
}

result
31.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

steve_michael2
Trailblazer
309 30 39

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
    font-size: 18px !important;
    font-weight: 900 !important;
}
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large {
    font-weight: 900 !important;
}
</style>

steve_michael2_0-1729773719741.png

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

Crafting exceptional online experiences with innovative design and technology.

Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount

websensepro
Shopify Partner
1289 145 166

Hi @radaApeta ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
 .header__menu-item {
    font-size: 14px !important;
    font-weight: 600;
}
</style>

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution. 
If you are happy with my help, you can help me buy a COFFEE
Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial