How to change Sub menu font size and font case in Horizon Theme?

Technical Q&A
, ,
1

Hello Guys,

Currently the font size and font case is the same for parent menu and sub menu when configured from the edit theme settings. I would like my sub menu items to be of lower case and smaller font size. I tried pasting the following in the base.css menu, but no changed noted :

.header__submenu .mega-menu__list-title, .header__submenu .header__menu-item { text-transform: lowercase !important; }

Screenshot 2026-07-12 at 11.33.28
Screenshot 2026-07-12 at 11.33.28512×237 8.96 KB

Any help would be greatly appreciated.

Thanks & Regards,

Geronim0

2

Hey @Geronim0

You can add this code below in the Custom CSS option of the header from theme customization.

.mega-menu__list span.wrap-text {
    text-transform: capitalize !important;
    font-size: 13px !important;
}
.menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu span {
    text-transform: capitalize !important;
    font-size: 12px !important;
}

OR

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.mega-menu__list span.wrap-text {
    text-transform: capitalize !important;
    font-size: 13px !important;
}
.menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu span {
    text-transform: capitalize !important;
    font-size: 12px !important;
}
</style>

RESULT:

image
image344×205 5.92 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hey Moeed,

It works perfectly. Thanks a lot mate. Much appreciated. :innocent:

Best Regards,

Geronim0

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

5

Hi Moeed,

Just forgot one thing. I also need to make the same changes for the Mobile font. Can you please suggest the code for this too ?

Thanks & Regards,

Girish

6

I have edited my code above, remove the previous code and add the updated code again!

Cheers,
Moeed

7

This is awesome Moeed. Works nicely.

I have a few other questions on other topics. Later i will post it if i am unable to set this up by myself.

Thanks a lot.

Geronim0

8

Glad it worked for you, if you’d like you can also let me know the other questions directly in DMs and I’ll be happy to take care of that too!

Best,
Moeed