Keep a menu item in a single line instead of two lines

[armandorangel]

On my menu, when dropdown, a menu item is split into 2 lines. I'd like to keep it in a single line. Maybe decreasing the font size or making the box container bigger. (See image attached)

[made4Uo]

Hi @armandorangel,

Can you share you website so we can provide a code specific for you?

[armandorangel]

https://create-my-rosary-3736.myshopify.com/products/full-rosaries

[GemPages]

Hello @armandorangel ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
#top-menu li li a {
    padding: 6px 5px;
    width: 100% !important;
}
.nav li ul.sub-menu {
    width: 300px;
}
#top-menu li li {
    width: 100%;
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[armandorangel]

Didn't work 😞

[Dan-From-Ryviu]

Hi @armandorangel, 

Go to Online store > Themes > Edit code > Assets > base.css, add this code at the bottom of file and click Save 

.list-menu--disclosure { width: max-content !important; }

[Dan-From-Ryviu]

Hi @armandorangel,

Please add this code at the bottom of base.css code of your file, click Save button 

.list-menu--disclosure { width: max-content !important; }

Here is the result 

[PageFly-Victor · Accepted solution]

Hi @Armandorangel,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-list-menu.css

Step 3: Paste the below code at bottom of the file -> Save

@media(min-width:767px){
.list-menu--disclosure{
width:23rem !important
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[infoatcodelab7]

@armandorangel 

Step1: Go to online store -> Edit code

Step2: Search base.css file

Step3: Paste below code bottom of the css file -> save

.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large {
  width: 24rem !important;
}