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

[LSAccounting]

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.

www.lsaccountingfirm.com

[BSS-TekLabs · Accepted solution]

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

- 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:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

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

- 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:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Gideon11]

Hi, 

1. Log into your store and go to customize.

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

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)

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.

[Made4uo-Ribe · Accepted solution]

Hi @LSAccounting 

Check this one.

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. 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;
}

• And Save. 
• Result:
• 

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