How can I increase the size of the submenu text in Ritual mobile view?

Technical Q&A
,

Topic summary

Mobile submenu text in the Shopify Ritual theme is too small; the goal is to increase its size on mobile.

An initial CSS suggestion targeting .header__submenu and .mobile-nav__submenu at max-width: 768px was added via Theme settings/Custom CSS or theme.css, but it did not work for the requester.

Two alternative approaches were proposed:

  • Insert CSS before the tag in theme.liquid to set .menu-drawer__menu-item–parent { font-size: 20px !important; } for max-width: 767px (with a screenshot of the result).
  • Add CSS at the very end of assets/styles.css: @media (max-width: 749px) { .menu-drawer__menu-item–parent .menu-drawer__menu-item-text { font-size: 20px; } }

The second alternative (styles.css with the more specific selector) resolved the issue; the requester confirmed it worked. Media queries (max-width) were used to target mobile view only.

New, unresolved follow-up: the requester asked how to remove product suggestions that appear when opening the desktop search bar, seeking a way to show only the search bar. No solution provided yet; discussion remains open on this point.

Summarized with AI on December 11. AI used: gpt-5.
1

Ritual does not come with the ability to edit the submenu text size and it is very small in mobile. How can I adjust this?

2 Likes
2

Go to Online Store → Themes → Customize

Click “Theme settings” → “Custom CSS”

(or go to Edit code → assets/theme.css and paste it at the bottom)

/* Increase mobile submenu text size in Ritual theme /
@media screen and (max-width: 768px) {
.header__submenu .header__menu-item,
.mobile-nav__submenu .mobile-nav__item {
font-size: 16px !important; / Adjust to your preferred size */
line-height: 1.4;
}
}

2 Likes
3

@ABdev1 If you share your website link, then I can provide the exact css

4

www.autobongs.com thank you for helping

5

This did not work but thank you for the suggestion.

6

@ABdev1 can you please enable right click?

7

Hey @ABdev1

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>
@media screen and (max-width: 767px) {
.menu-drawer__menu-item--parent {
    font-size: 20px !important;
}
}
</style>

RESULT:

image
image259Ă—732 16.4 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
8

@ABdev1 please add this css to the very end of your styles.css file and check

shopify admin->online store->themes->edit theme code->assets->styles.css

@media screen and (max-width: 749px) {
.menu-drawer__menu-item--parent .menu-drawer__menu-item-text{font-size: 20px;}
}

image
image1366Ă—768 124 KB

1 Like
9

thank you very much this worked!

1 Like
10

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

1 Like
11

Hey Moeed I am trying to remove the products that are attached to the search bar when the search bar is opened in desktop view. There does not appear to be a way to edit this feature in the editor. Do you have a way for me to remove this so that only the search bar shows up when selected?