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?

[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

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[armandorangel]

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

[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; }

[PageFly-Victor]

Hi [email removed]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;
}

[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