Page 1 of 1
Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 12:21 pm
by DarioMartin
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 "<br>" tag. e.g. "Yoga Classes<br> & 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
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 12:43 pm
by Pablo
Do you have a demo?
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 1:16 pm
by DarioMartin
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 1:35 pm
by Pablo
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>
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 1:38 pm
by crispy68
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
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 2:08 pm
by DarioMartin
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 <br> tag in them .... so the entries between the first and last entries (on the hamburger menu only) are "ignoring" the <br> 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
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 2:35 pm
by crispy68
so the entries between the first and last entries (on the hamburger menu only) are "ignoring" the <br> tag.
It's not that they are ignoring the <br> 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.
Re: Force line break in Responsive Menu
Posted: Fri Oct 06, 2023 2:43 pm
by DarioMartin
No I get that - but the text is specified with a <br> tag i.e. "Therapies<br>& Other Services", "Workshops<br>& 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.