Make dropdown menu text smaller

Shopify Discussion
1

Hello,

I would like to make my dropdown menu text smaller. How do i code this? Thank you

Ella.

URL: https://www.livwithin.com.au/

PW: pewpog

Screenshot 2025-03-20 at 13.46.09.png
Screenshot 2025-03-20 at 13.46.09.png2539×1258 462 KB

2

Hi there Ella @ellacoker I believe this code should help you sort it out

.mega-menu[open] .mega-menu__content, .header header-drawer #menu-drawer { background: #f9e9c5 !important; } .mega-menu[open] .mega-menu__content .mega-menu__list .mega-menu__link { font-size: 25px !important }

Feel free to change the number 25 and color #f9e9c5 to any other number and color you want for the text.

3

Hi @ellacoker

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

ul.menu-drawer__menu.has-submenu.list-menu li a {
    font-size: 13px !important;
}

Result

DaisyVo_1-1742443196789.png
DaisyVo_1-1742443196789.png1178×653 644 KB

Best,

DaisyVo

4

Hi @ellacoker This can be achieved by adding Custom CSS to the theme

  1. In the Shopify Admin go to Online Stone and select the Themes option and Code
  2. Open the base.css or theme.css based on the theme in Assets Folder.
  3. Add the Css

/* Reduce dropdown menu font size /
.site-nav__dropdown li a {
font-size: 14px !important; / Adjust size as needed /
line-height: 1.4; / Improves readability */
}

Let me know if this works for you.