change mobile menu font size PIPELINE

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)

Shopify Partner
483 106 114



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.




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

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>


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


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.

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 for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

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:




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: 



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

BSS Commerce - Full-service eCommerce Agency