change mobile menu font size PIPELINE

[sofleeuh]

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

[GabrielS]

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.

Cheers!

[PageFly-Noah]

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

[Made4uo-Ribe]

HI @sofleeuh 

would you mind to share your store URL? Thanks!

[BSSCommerce-B2B]

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!