Help - resize font drop-down menu

Store Design
, ,

Topic summary

A user seeks help reducing the font size of their Shopify store’s drop-down menu. They successfully resolved the font size issue independently but encountered difficulty resizing the dropdown arrows on both desktop and mobile devices.

Solutions provided:

  • Desktop arrows: CSS targeting .aside-menu__item .icon-arrow with width/height set to 2rem successfully reduced desktop arrow size
  • Mobile arrows: Initial CSS targeting .menu-drawer .icon-arrow (1.5rem) didn’t work as expected
  • Working mobile fix: A more specific CSS selector targeting the header-drawer menu with max-width: 768px media query and width: 20px !important resolved the mobile arrow sizing issue

Status: The issue appears resolved with the final CSS solution addressing both desktop and mobile arrow sizes. Code snippets and visual examples were provided to demonstrate the results.

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

Hi everyone, I need your help. I would like to decrease the font size of my drop-down menu. Unfortunately I can’t do it alone.

Thank you in advance for your kind replies :slightly_smiling_face:

Mark

Site link: refade-8966.myshopify.com

Immagine 2025-01-11 222243.png
Immagine 2025-01-11 222243.png1900×892 125 KB

1 Like
2

Hi @Marco211

Did you already solved the problem? I just see this code in your base.css file.

Made4uoRibe_0-1736635703853.png
Made4uoRibe_0-1736635703853.png809×268 7.09 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi, I managed to resolve the issue related to the font, but I can’t reduce the size of the arrows in the drop-down menu. Do you know how to do it? Both on phone and computer

Thank you :slightly_smiling_face:

4

Yep sure, add this one.

/* desktop screen */
.aside-menu__item .icon-arrow {
    width: 2rem;
    height: 2rem;
}
/* mobile screen */
.menu-drawer .icon-arrow {
    width: 1.5rem;
    height: 1.5rem;
}

And Save.

Result:

Made4uoRibe_0-1736636327491.png
Made4uoRibe_0-1736636327491.png441×224 2.98 KB

If its not working just add !important;

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

A thousand thanks. The only thing is that on the phone the arrows are still large. They only shrunk on desktop

6

Hi @Marco211

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
header-drawer details.menu-drawer-container div#menu-drawer summary.menu-drawer__menu-item > svg.icon.icon-arrow {
    width: 20px !important;
}
}

Here is the result:

image_480.png
image_480.png263×480 14.9 KB

I hope this helps

Best,

Daisy