Menu titles are forced to multiple lines. I want 1 long title

How go you get a menu title to be on one long line and to not “return” to the next line? So for Caldwell Advantage - 7YEPP (see screenshot), I want it all on 1 one line not 3 separate lines. (Top photo is the desired effect. Bottom photo is the unwanted effect.) Thanks.

When you select your menu, make sure you aren’t using the primary menu, choose none. Mine is setup this way and the box will adjust based on what I have in there.

Alternatively, you could add a class to that list and manually set the width.

I tried created a class and changing the width, but that causes some funky side effects. As for the primary menu, the issue isn’t with that. Are there any other settings inside the custom class besides width that need to be changed? I clicked the List container in the SERVICE menu nav, then I set the width at 300px under the normal dropdown. This causes a bunch of issues such as the menu always being open and it moved way to the left of where it should be under the SERVICE dropdown.
Other thoughts?

Could you try setting the width to 100%?

A question I also need to care about, thanks for your answer.

Hi @Brett,

You don’t need to use a custom class. Just add the Bootstrap class to the class manager.


This class by default has a min-width of 10rem. To override it set the min-width in the class manager.


I’m off googling


EM is relative to the parent font size

REM is relative to the base font size

WTF is relative to the confusion :rofl:

an example. If a parent font size was 14px, the child font size of 1em would equal 14px. 2em would be 28px.

The same for REM, but it scales its size from the root font size of the entire site.


Thanks Malachi,
That worked!

1 Like

hi all,

sorry to bring up an old post.
I too have multiple lines on a dropdown menu.

I did what @Malachiman has said above my typing .dropdown-menu in the class manager, and I dont get any change, but if I type this int the class manager, I do get them on a full line - but as a bullet point and its always open.
I have attached what I get.

Can someone let me know the full procedure to get my text on 1 line…do i need to apply the class manager to a certain area? and where do i change the REM? cant see anywhere to adjust…is this in the class manager i take it?

Do you have a link.

Hi @Malachiman,

Im afraid, not as yet - only playing around with things as i’m building my site.
Tried several times and still wont do my page title on a whole line

Instead of:
Event Management

I get:

Or when i put the code in as my above post then I get the bullet point in.

You don’t have to add the class anywhere apart from the class manager.

Maybe try using this. Keep the spacing.

.navbar-nav .dropdown-menu

Do you have any other classes applied to the navigation??

I’m also running into the problem of my sub menu getting items divided into multiple lines. Adding .dropdown-menu as a class to the menu changes the design of the menu, and it gets a border around it (that I don’t want)… How do I sort this out? :slight_smile:

By starting to provide some more detailed information. Any link or images would be helpful to understand better.

Sure! It looks like in this screenshot. Instead of having Example of another menu item divided into two lines, I’d like the menu to expand to keep it in one line.

I’m not able to duplicate your challenge:
Kapture 2021-10-22 at 16.30.50

That’s very strange. Doesn’t work for me, and I’ve tried to create a new project all together to check if there’s some other code in my current project that messes with the menu, but it’s the same thing - the lines gets cut. Are you just using the default settings, no classes or anything?

I’m still note able to get it to work on my site.
Here’s a link (removed). Any ideas what the issue is?

As an alternative option just set the column width of the .dropdown-menu class:

Edit: @Malachiman mentioned the same solution in this thread nearly 2 years ago.

1 Like