Force line break in Responsive Menu

DarioMartin · Post by **DarioMartin** » Fri Oct 06, 2023 12:21 pm

I have a site where some of the headings in the responsive menu are long. For Example "Yoga Classes & Information". At the moment, I force this to break across two lines so as to keep the menu all on one line by using the " " tag. e.g. "Yoga Classes & information" in the text area of the responsive menu.

This works absolutely perfectly down through to 768px - tablet size, appearing on the responsive menu as:

Yoga Classes
& Information

However, when I go down to mobile size and the hamburger menu appears, it now displays as on the hamburger menu :

Yoga Classes

& Information

with an extra line between the two. Is there anyway to get rid of this extra line. I really want a Soft return between the two, not a hard return which I know can cause extra lines

Post by **Pablo** » Fri Oct 06, 2023 12:43 pm

Do you have a demo?

DarioMartin · Post by **DarioMartin** » Fri Oct 06, 2023 1:16 pm

Yes - go to https://www.vavayoga.com

Post by **Pablo** » Fri Oct 06, 2023 1:35 pm

I think the quickest way to solve this is to override the line-height like this:

Code: Select all

<style>
#wb_VAVA_ResponsiveMenu320 .toggle 
{
    line-height: 1.5 !important;
}
</style>

crispy68 · Post by **crispy68** » Fri Oct 06, 2023 1:38 pm

It appears that when it goes into mobile mode, that a line height is set on the label for the ones with a toggle (down arrow). In your case it has a 51px height which is why it is so tall.

For now, you could add some css code set between the <head> tags like such:

Code: Select all

<style>
#wb_VAVA_ResponsiveMenu320 .toggle{line-height:30px;}
</style>

Pablo beat me to it! LOL

DarioMartin · Post by **DarioMartin** » Fri Oct 06, 2023 2:08 pm

Thank you Gentlemen. OK, Pablo, I tried your solution first - sadly it made no difference, however I then instead tried the solution offered by Crispy68 and ... SUCCESS - that works perfectly (set line height to 20 px instead of 30 though)

Now that it breaks correctly, I notice something I didn't see before - only the first and last menu entries are breaking, yet all the long ones have the tag in them .... so the entries between the first and last entries (on the hamburger menu only) are "ignoring" the tag.

I have just uploaded the site again if you would like to see what I mean. Still, I'm a happy lad anyway, despite the "middle" entries not breaking. Line height doesn't look bad now - thank you both very much

crispy68 · Post by **crispy68** » Fri Oct 06, 2023 2:35 pm

so the entries between the first and last entries (on the hamburger menu only) are "ignoring" the tag.

It's not that they are ignoring the tag. It's because those 2 entries have a label tag (down arrow) with a line height applied to them causing them to be taller. The others do not have the line height code.

DarioMartin · Post by **DarioMartin** » Fri Oct 06, 2023 2:43 pm

No I get that - but the text is specified with a tag i.e. "Therapies & Other Services", "Workshops & Events" etc etc. On the full size and 768 menu's they all break, but on 320 it's only the entries that have a down arrow

So it appears that only the entries with the down arrow recognise that the text string has an explicit line break in it.

www.wysiwygwebbuilder.com

Force line break in Responsive Menu

Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu

Re: Force line break in Responsive Menu