Dropdown menu text breaking into two lines – need wider menu box

[BenjaminW]

Hi Shopify Community 🙌

I’m working on a customized version of the Dawn theme and have a dropdown menu in the header titled “Hjælp” (Help).

One of the submenu links – “Ofte stillede spørgsmål” (Frequently Asked Questions) – is breaking into two lines because the dropdown menu box isn’t wide enough. I want the entire link to stay on one line.

Here’s what I’ve tried (without success): 

#HeaderMenu-MenuList-2 {

  white-space: nowrap;

  width: auto;

}

I also tried adjusting padding, min-width, and max-width, but the dropdown still doesn’t expand to fit the full text.

The correct element has the ID #HeaderMenu-MenuList-2, confirmed via DevTools. I’ve added the code to base.css and verified it’s saving properly.

How can I make the dropdown menu automatically expand to fit the longest link so nothing breaks onto two lines?

Thanks in advance 🙏

– Benjamin

[Jack_Khan_Baba]

share your store link 

[BenjaminW]

https://soola.dk/products/soola-pro

[Dan-From-Ryviu]

Hi @BenjaminW 

Please add this code to Cutom CSS in Online Store > Themes > Customize > Theme settings.

details[open] > .header__submenu {
    width: max-content;
}

 

[namphan]

Hi @BenjaminW,

Please go to Actions > Edit code > Assets > component-list-menu.css file and paste this at the bottom of the file:

.list-menu--disclosure {
    width: 22rem;
}