Change mobile menu font size PIPELINE

Store Design
, ,
1

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

2 Likes
2

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
GabrielS_0-1717922805340.png641×1156 37.1 KB

Cheers!

3

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

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

4

HI @sofleeuh

would you mind to share your store URL? Thanks!

5

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
BSSCommerceB2B_1-1718036680799.png400×195 26.3 KB

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
BSSCommerceB2B_2-1718036814260.png469×843 13 KB

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!