How can I increase the size of my mobile navigation menu?

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user needs to increase the font size of their mobile navigation menu while keeping the desktop version unchanged. They provided screenshots showing the current small mobile menu and their desired larger appearance.

Multiple solutions offered:

All responses suggest adding CSS code targeting mobile viewports (max-width: 749px or 767px) to the theme files:

  • PageFly-Henry & David_SHT: Add code to base.css file increasing .menu-drawer__menu-item font-size to 20px or 24px
  • Dan-From-Ryviu: Remove existing CSS code from theme.liquid file that sets font-size to 10px
  • Transcy: Add custom CSS to base.css or theme.scss.liquid with 18px font-size for navigation class

Common approach:
Access Online Store → Themes → Edit code → Assets folder → Modify CSS files with media queries specifically for mobile devices.

The issue remains unresolved as the original poster hasn’t confirmed which solution worked.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello, guys! How can I make the navigation menu on my header bigger only for mobile versions? Desktop size is perfect, but it’s too small on mobile. Thank you in advance!

Website: https://fddd3f.myshopify.com/

How it looks on mobile:

366156715_703299001629046_7540315803840917537_n.jpg
366156715_703299001629046_7540315803840917537_n.jpg312×540 5.64 KB

How I want it to look (but white):

Screenshot_1.png
Screenshot_1.png248×810 4.45 KB

2

Hi @kitchencrafted

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 749px) {

.menu-drawer summary.menu-drawer__menu-item {

font-size: 20px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hi @kitchencrafted

You can make it bigger by finding and removing this CSS code at the bottom of you theme.liquid file

@media (max-width: 749px){
    .menu-drawer__menu-item{
        font-size: 10px !important;
    }
}
4

Hello @kitchencrafted ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder => base.css file or theme.scss.liquid file

Add this following code at the bottom of page:

@media (max-width: 767px) {
  .your-navigation-class {
    font-size: 18px;
  }
}

Save and preview

Hope this can help.

Transcy

1 Like
5

Hi @kitchencrafted ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

@media (max-width: 749px) {
.menu-drawer__menu .menu-drawer__close-button,
.menu-drawer__menu .menu-drawer__menu-item {
    font-size: 24px !important;
}}

Hope this can help.

David | SalesHunterThemes team