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.

.dropdown-menu

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

3 Likes

REM
EM
WTF
I’m off googling

@apswoodwork

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.

4 Likes

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

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