Horizon: Font Size of the mobile menu

Store Design
1

Hello everyone

I am new here and am delighted to be part of this forum.
I have been working with the Horizon theme for a few days now.
I like it quite a lot. However, I still have a couple of questions about the menu.

How can I change the font size of the mobile menu in Horizon? I would like to increase the font size of the submenu (when you click on the plus sign). At the moment, it seems too small to me compared to the main menu items.

However, I can’t find a suitable value or CSS anywhere.

Who can help me with this?

Thank you very much for your support.

Best wishes
Marco

2

@Marco-81 Thanks for reaching out to Shopify community with your concern. Can you please provide the URL of your store and if it is password protected please share the password too. So that I can provide you the exact CSS to add for adjusting font size. Thanks

4

Hey @Marco-81

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

Hello NerdCurator
Hello Moeed

Thank you very much for your prompt reply.
My store is just a little test at the moment to see if I should switch from WooCommerce to Shopify :-).

Here is the URL: https://ryzmkq-mh.myshopify.com/
Password: 1234

My first question is about the mobile menu.

I look forward to your replies.

Best regards,
Marco

6

Hello @Marco-81 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:750px){
.menu-drawer__menu-item--child {
    font-size: 17px !important;
}
}

image
image587×762 83.6 KB

Let me know if you need further assistance!

7

Hey @Marco-81

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>
.menu-drawer__menu-item-text {
    font-size: 20px !important;
}
</style>

RESULT:

image
image364×668 19.5 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

8

Hello ZestardTech
Hello Moeed

WOW, thank you very much for your prompt reply. I really appreciate it.

It worked, and the menu looks much better now.

I have a second question. I’m still not satisfied with the Mega Menu (desktop version).

How do you use the Mega Menu, or do you use an app? How can I customize it? Do I have to mess around with mega-menu.liquid?

Is it possible to switch to the “normal” menu instead of the “Mega Menu”?

I look forward to your feedback and thank you for your time.

Best regards,
Marco

9

Hi @Marco-81 ,

I am from Mageplaza - Shopify solution expert.

For displaying the menu on desktop devices:

  • If you’re only changing the style, such as colors, fonts, or font size, you can simply add custom CSS to the base.css file.

  • If you want deeper customization related to functionality, you’ll need to modify the relevant Liquid files associated with the mega menu.

If you have any customization ideas for your mega menu, feel free to share them with me. I’m happy and ready to help!

Best regards,

10

Hello @mageplaza-cs

Thank you very much for your valuable feedback.
I would like to customize the Mega Menu visually.

I will be happy to send you a screenshot of what I have in mind in the next 1-2 days. I simply don’t like the standard Mega Menu, i.e., all entries are “squeezed” onto the left side. I would like to divide it up a bit more nicely, with headings, etc.

I will be happy to send a screenshot in the next few days.
In general, would it be possible to activate the “normal” menu?

Thank you in advance for your help.

Best wishes
Marco

12

Hi @mageplaza-cs

Thank you very much for your prompt reply. I will be happy to contact you to optimize the menu. Many thanks in advance for your help.

Best regards,
Marco

13

@mageplaza-cs

By the way, I haven’t figured out how to send you a PM :-).

Best regards,
Marco

14

@Marco-81
Did you see the message I sent under Personal Messages > View All?
:smiley:

15

Hey @Marco-81,

This has been a fun thread to follow! I’m sure @mageplaza-cs will get your mega menu sorted perfectly. If you ever need a hand with anything else, just give us a shout, we’re happy to help.

Cheers!
Shubham | Untechnickle

16

You can adjust it by adding custom CSS, for example:

@media (max-width: 749px) {
  .menu-drawer__menu-item { font-size: 16px !important; }
}

Paste this into your theme’s Custom CSS or Edit Code to control mobile menu font size.