Line break in menu items

david157
98 Posts
david157 posted this 04 October 2016

Hi

As the width at which the menu changes into the responsive one cannot be changed (i.e set at 768px), is there a way in which horizontal menu items can be split over two lines to reduce the total width of the menu - like this:

menu.jpg

If so, can they additionally be centred vertically with each other. Or is a mega menu the only way of doing this?

Many thanks in advance, David

Hi As the width at which the menu changes into the responsive one cannot be changed (i.e set at 768px), is there a way in which horizontal menu items can be split over two lines to reduce the total width of the menu - like this: !menu.jpg! If so, can they additionally be centred vertically with each other. Or is a mega menu the only way of doing this? Many thanks in advance, David
Vote to pay developers attention to this features or issue.
10 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 05 October 2016

Hi,

Yes, you can set the fixed width for each menu item or the max-width and then use the white-space option set to wrap so the item name will be splitted into two lines.

Sincerely,
Hella

Hi, Yes, you can set the fixed width for each menu item or the max-width and then use the white-space option set to wrap so the item name will be splitted into two lines. Sincerely, Hella
david157
98 Posts
david157 posted this 05 October 2016

Hi Hella

Great thanks I was struggling because I had one element in my menu width set to 100% (can't remember which now) but I have now removed it and it works.

Is there any way to vertically align each menu item so that they and the associated menu bar separators all line up together?
With the menu at full screen, the menu items and their separators all line up nicely:

2016-10-05-10-29-41.png

But when the menu is shrunk, the items are no longer aligned along the same axis:

2016-10-05-10-32-06.png

It would look better if everything was along the "FOUNTAIN" axis.

Thanks again, David

Hi Hella Great thanks I was struggling because I had one element in my menu width set to 100% (can't remember which now) but I have now removed it and it works. Is there any way to vertically align each menu item so that they and the associated menu bar separators all line up together? With the menu at full screen, the menu items and their separators all line up nicely: !2016-10-05-10-29-41.png! But when the menu is shrunk, the items are no longer aligned along the same axis: !2016-10-05-10-32-06.png! It would look better if everything was along the "FOUNTAIN" axis. Thanks again, David
david157
98 Posts
david157 posted this 05 October 2016

Hi

I've got it partially sorted by using this:

ul.bd-menu-1 li a {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

Right now it looks like this:

2016-10-05-11-14-44.png

but in an ideal world it would be nice to get the bar at the top of home (at the moment) lined up where it would be when on top of "CHOCOLATE", i.e. higher than it is right now.

Thanks, David

Hi I've got it partially sorted by using this: ul.bd-menu-1 li a { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } Right now it looks like this: !2016-10-05-11-14-44.png! but in an ideal world it would be nice to get the bar at the top of home (at the moment) lined up where it would be when on top of "CHOCOLATE", i.e. higher than it is right now. Thanks, David
Support Team
Support Team posted this 05 October 2016

Hi,

Please provide a link to the page where we could see the issue or an access to the site back end so we could review the settings.

Sincerely,
Hella

Hi, Please provide a link to the page where we could see the issue or an access to the site back end so we could review the settings. Sincerely, Hella
david157
98 Posts
david157 posted this 05 October 2016

I've managed to get it working much better now:

2016-10-05-11-30-21.png

What it was in the end was that I had padding on the left and right of the menu items that I have now removed. Can't really understand why this worked but it did.

Many thanks, David :-)

I've managed to get it working much better now: !2016-10-05-11-30-21.png! What it was in the end was that I had padding on the left and right of the menu items that I have now removed. Can't really understand why this worked but it did. Many thanks, David :-)
Support Team
Support Team posted this 05 October 2016

Nice to hear that you have found the solution. Feel free to contact us in any other occasion.

Sincerely,
Hella

Nice to hear that you have found the solution. Feel free to contact us in any other occasion. Sincerely, Hella
david157
98 Posts
david157 posted this 05 October 2016

Will do.

I must say that the support I get from Themler is excellent, certainly among the best I have had. Nothing seems too much of an issue.

Many thanks, David

Will do. I must say that the support I get from Themler is excellent, certainly among the best I have had. Nothing seems too much of an issue. Many thanks, David
Support Team
Support Team posted this 05 October 2016

Thanks for your feedback. We appreciate that our support helps you so far. Do not hesitate to contact us again.

Sincerely,
Hella

Thanks for your feedback. We appreciate that our support helps you so far. Do not hesitate to contact us again. Sincerely, Hella
anmeldemail2
8 Posts
anmeldemail2 posted this 20 January 2017

Hi,

Yes, you can set the fixed width for each menu item or the max-width and then use the white-space option set to wrap so the item name will be splitted into two lines.

Sincerely,
Hella

Hello Hella,

can you show it with pictures, how to

> Hi, > > Yes, you can set the fixed width for each menu item or the max-width and then use the white-space option set to wrap so the item name will be splitted into two lines. > > Sincerely, > Hella Hello Hella, can you show it with pictures, how to
Support Team
Support Team posted this 23 January 2017

Hi,

Please find the attached screen shot:

menu-two-lines.png

Sincerely,
Hella

Hi, Please find the attached screen shot: !menu-two-lines.png! Sincerely, Hella
You must log in or register to leave comments