change mobile menu font size PIPELINE

sofleeuh
Visitor
1 0 2

menu font size is way too small - found a solution to change for desktop site but not mobile. it drives me crazy, please help!

Replies 4 (4)

GabrielS
Shopify Partner
483 106 114

Hi,

 

You can change the menu font size in Pipeline theme by using a similar CSS to the below:

@media (max-width:768px) {
.header__wrapper nav a, .header__wrapper nav span {
  font-size: 20px !important;
}
}

Adding the above at the end of your theme.css file should be working as expected.

GabrielS_0-1717922805340.png

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

PageFly-Noah
Shopify Partner
1283 227 260

This is Noah from PageFly - Shopify Page Builder App

 

Hi @sofleeuh  please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (max-width: 767px){
   .drawer__menu span{
    font-size: 18px !important;
 }
   .drawer__menu a{
    font-size: 18px !important;
 }
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Made4uo-Ribe
Shopify Partner
6431 1543 1912

HI @sofleeuh 

would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

BSSCommerce-B2B
Shopify Expert
433 80 92

Hi @sofleeuh , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_1-1718036680799.png

 

 

Step 2: Search for the file base.css, theme.css, styles.css or theme.scss.liquid. And add this code snippet to the end of the file.

.menu-drawer__menu-item {
    font-size: 2.8rem !important;
}

In this step, you can change font-size as you want to make menu font size bigger or smaller. 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_2-1718036814260.png

 

We hope my suggestions will solved your issue.

 

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. 

Have a nice day, sir! 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency