How can I reduce the font size of my dropdown menu items?

[GeminiAtelier]

Hi,

I run my webshop under the Reformation theme, but I cannot reduce the font size of my dropdown menu items. I would like it 2px smaller than the main navigation item. I tried to inject some code into theme.liquid but it does not work at all.

Thanks for the help!

[Made4uo-Ribe]

Hi @GeminiAtelier ,

Would you mind to share your URL Website with password?

Thanks!

[GeminiAtelier]

Hi Rose_Dim,

Of course. Url is https://geminiatelier.com/ and password is test1010

[NomtechSolution]

1. Locate the Reformation theme and click on the “Actions” dropdown menu, then select “Edit code”.

2. In the code editor, find the file named “theme.scss.liquid” or “theme.css.liquid” and click on it to open it.

3. Scroll down the file until you find the section related to the dropdown menu styles. Look for a selector that targets the dropdown menu items specifically. It might be something like .site-nav__dropdown-item.

.site-nav__dropdown-item {
  font-size: 2px smaller;
}

[GeminiAtelier]

Hi @NomtechSolution , it does not work. I cannot find any selector called .site-nav… targeting or mentioning the dropdown menu. If i add this line of code into them.liquid, it does not make any difference neither.

[NomtechSolution]

use this code

.thb-full-menu .sub-menu li a {
    font-size: 10px;
}

[GeminiAtelier]

Nothing happens. It’s really strange…

[GeminiAtelier]

[Made4uo-Ribe]

Thank you for the information.

You can try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.sub-menu.mega-menu-container a {
    font-size: 10px;
}

I try the 2px but too small hardly can read it.

Result:

If you dont find any of those file you can try to paste in app.css

I hope it help.

[Made4uo-Ribe]

not in this file. it should be with .css on the last name. if you put style on the liquid it must have tag.

[GeminiAtelier]

Found only the app.css file and it worked! Thank you.

Could you tell me how to reduce the font size of the dropdown tittles too (Wear & Nursing)?

[Made4uo-Ribe]

Try this one.

.thb-full-menu .mega-menu-columns__heading {
    font-size: 20px !important;
}

You can change the font any size you want just edit it, put on the same file.

Thanks!

[GeminiAtelier]

Perfect! Thank you very much

[Made4uo-Ribe]

Welcome, Happy to help.