Mobile Menu Font Size Adjustment – Horizon Theme

Store Design
, , ,
1

Hello everyone,

I have a couple of questions regarding the menu and was hoping someone could help me with the required code.

How can I change the font size of the mobile menu in the Horizon theme? I would like to increase the font size of the main menu items as well as the submenu items that appear when clicking the plus icon. At the moment, the text appears too small compared to the desktop menu.

For the mega menu, I would like the font sizes to be:

  • 20px for the main menu

  • 18px for collections

  • 16px for sub-collections

Thank you very much for your support and assistance.

Screenshot_20251221-150359_Chrome
Screenshot_20251221-150359_Chrome1220×2599 64.7 KB

Screenshot_20251221-150402_Chrome
Screenshot_20251221-150402_Chrome1220×2712 275 KB

Screenshot_20251221-150406_Chrome
Screenshot_20251221-150406_Chrome1220×2712 299 KB

2

Try code like this in “Custom CSS”, either in Header section settings or in Theme settings (cog icon):

.menu-drawer__menu.has-submenu {
  --menu-top-level-font-size: 20px;
  --menu-parent-font-size: 18px;
  --menu-child-font-size: 16px;
}

This way it will override font sizes for drawer menu items.

3

@naveen.raj can you please share your website link?

4

@naveen.raj
Try this code by following these steps:
1: Go to the online store - Theme - Edit Code.
2: Find the theme.liquid file and add the following code before the tag

<style>
.menu-drawer__menu-item--mainlist {
  font-size: 20px !important;
}

.menu-drawer__menu-item--parent {
  font-size: 18px !important;
}

.menu-drawer__menu-item--parent .menu-drawer__menu-item-text {
  font-size: 16px !important;
}
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

5

Thank you :heart: It worked, and the menu looks much better now.

6

Thank you :heart: It worked

7

I got the solution from the other comments. Thanks for reaching out to help!

8

Hello all! I’ve been pulling out my hair but then I found this thread and finally have some hope :). I’ve adjust the code above a bit (pasted below) and it’s working for two of the links in the “hierarchy" but I’m trying to edit the third. I used basic colors to test it out and attached the screenshots. Orange Level 1 works (Home, Mercantile, etc) and Green Level 2 works (Clothing, Hats, etc) but now I’m trying to edit the Blue third level (T-shirts, Long sleeve tees, etc). The + sign is blue, but the text remains black. I’d like to remove the capitalization of that font and make it a bit smaller. Any help is MUCH appreciated!

mobilemenu
mobilemenu1961×922 140 KB

.menu-drawer__menu-item--mainlist {
  font-size: 24px !important;
  color: #e06c3d !important;
}

.menu-drawer__menu-item--parent {
  font-size: 22px !important;
  text-transform: none !important;
  color: #000 !important;
}

.menu-drawer__menu-item--parent .menu-drawer__menu-item-text {
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: #515d2c !important;
}
9 
.menu-drawer__menu-item--mainlist {
  font-size: 24px !important;
  color: #e06c3d !important;
}
.menu-drawer__menu-item--parent .menu-drawer__menu-item-text {
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: #38272d !important;
} /* SUB-SUB (grandchild) text */
.menu-drawer ul.menu-drawer__menu--grandchildlist .menu-drawer__menu-item-text {
  color: #73676c !important;
  font-size: 18px !important;
  text-transform: none !important;
}
.menu-drawer
  ul.menu-drawer__menu--grandchildlist
  > li
  > a
  .menu-drawer__menu-item-text {
  padding-left: 15px !important;
}

Just in case anyone else runs into this issue, this seems to work!

10

Just use more CSS variables Horizon uses in its CSS…

.menu-drawer__menu.has-submenu {
  --menu-top-level-font-size: 20px;
  --menu-top-level-font-color: ...;
  --menu-top-level-font-case: ...;      /* if needed */

  --menu-parent-font-size: 18px;
  --menu-parent-font-color: ...;
  --menu-parent-active-font-color: ...; /* for hover state */
  --menu-parent-font-case: none;        /* for text-transform */

  --menu-child-font-size: 16px;
  --menu-child-font-color: ... ;
  --menu-child-active-font-color: ...; 
  --menu-child-font-case: none;
}

Refer to Horizon source code – horizon/blocks/_header-menu.liquid at main · Shopify/horizon · GitHub