How to make the sub-menu wider or reduce the text size of the sub-menus?

Store Design
,

Topic summary

Menu/sub-menu items are truncated on hover; the requester wants the sub-menu wider or text smaller so full page names show.

Proposed fixes focus on CSS changes (no font-size reduction provided):

  • Edit theme.css to widen second-level submenus on larger screens: set .navigation__submenu[data-depth=“2”] width to 300px within a @media (min-width: 600px) block. Steps and an example result image are provided.
  • Add Custom CSS via Customize > Header: make .navigation__submenu-item width: max-content with padding so boxes expand to fit content. This solves truncation but reveals a horizontal overflow issue (“PDF Forms” requires scrolling on a 15.6" screen); suggested remedies include switching to a vertical navbar, using a mega menu with fewer main links, or moving excess items to the footer.
  • Update main.css/base.css/style.css: set a targeted submenu UL to width: auto, remove left margin on depth-2 submenus, and set a CSS variable --width: 350px for .navigation__submenu. Steps and a result image are provided.

Attachments (screenshots) show settings and outcomes; the store URL is shared for context. No confirmation from the original poster; the thread remains open, and no solution reducing text size was offered.

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

My menu and sub-menu appears on hover.

As you can see in the picture below, the names of my pages are not shown in full as the menu is short.

Is there a way to make the sub-menu box wider so the page names show in full? OR change the text size so it appears smaller and fits in the box.

Untitled.png
Untitled.png825×651 167 KB

www.lsaccountingfirm.com

2
  • Here is the solution for you @LSAccounting
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 600px) {
 html:not(.no-js) .navigation__submenu[data-depth="2"] {
 width: 300px !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721054377640.png
BSSTekLabs_0-1721054377640.png1804×459 917 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Hi,

  1. Log into your store and go to customize.

Screenshot 2024-07-15 162048.png
Screenshot 2024-07-15 162048.png1045×559 132 KB

  1. Go to Header settings, scroll to the bottom and click custom css,

Screenshot 2024-07-15 162157.png
Screenshot 2024-07-15 162157.png287×109 2.78 KB

3.Copy and paste the following:

html:not(.no-js) .navigation__submenu-item {
    width: max-content;
    padding-inline: 10px !important;
}

The above code will make sure the size of the box is always larger than the content.

The above code solves the problem you postem, but your navbar has an overflow issue, because the user has to scroll to reveal the PDF Forms item.

My PC is 15.6", and I had to scroll. To fix this problem, you can take one of the options below;

You can opt for a vertical navbar (Check Attached Image)

Screenshot 2024-07-15 161249.png
Screenshot 2024-07-15 161249.png273×132 6.05 KB

You may opt for a mega menu with lesser main nav links.

Third option is to reduce the number of items on your main navbar, you can move the excess to the footer.

1 Like
4

Hi @LSAccounting

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
header > div.header__inner > div.header__below-left > nav > ul > li:nth-child(5) > ul > li:nth-child(2) > ul {
    width: auto;
}
html:not(.no-js) .navigation__submenu[data-depth="2"] {
    margin-left: 0;
}
html:not(.no-js) .navigation__submenu {
    --width: 350px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like