Multiline menu item for wordpress

luisalfredo.hernandez
4 Posts
luisalfredo.hernandez posted this 16 January 2016

Hi.

i need to create a top menu navigation for 6 pages, but the items text are very large. i need to break the long text in 2 lines.
i have tried usign <br> on labels for each menu page, but its not working

for example: Registro de entidades <br> sin animo de lucro (this is working on static page, but not on wordpress)

is there some menu configuration on themler o wordpress that let me define the text for menu items in two lines?

Please see the images.

Best regards, thanks in advance.

Hi. i need to create a top menu navigation for 6 pages, but the items text are very large. i need to break the long text in 2 lines. i have tried usign &lt;br&gt; on labels for each menu page, but its not working for example: Registro de entidades &lt;br&gt; sin animo de lucro (this is working on static page, but not on wordpress) is there some menu configuration on themler o wordpress that let me define the text for menu items in two lines? Please see the images. Best regards, thanks in advance.
width menu-items word-wrap wrap
static-html.jpg
actually.jpg
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
csi007
4 Posts
csi007 posted this 05 July 2019

Resolved by using HTML codes directly in the description of each menu item

Resolved by using HTML codes directly in the description of each menu item

Last edited 14 July 2019 by csi007

csi007
4 Posts
csi007 posted this 20 June 2019

Hi, I have the same problem and I have not found a solution. The menu overlaps. I'm sending a picture. The address is beno.pokora.net
Please advise me where I'm making a mistake?
Thank you

enter image description here

Hi, I have the same problem and I have not found a solution. The menu overlaps. I'm sending a picture. The address is beno.pokora.net Please advise me where I'm making a mistake? Thank you ![enter image description here][1] [1]: http://beno.pokora.net/menu.jpg

Last edited 23 June 2019 by csi007

Support Team
Support Team posted this 01 September 2016

Hi,

Please attach a screen shot of the problem as I do not see any menu items overlapping the screen.

Sincerely,
Hella

Hi, Please attach a screen shot of the problem as I do not see any menu items overlapping the screen. Sincerely, Hella
osangoqui
5 Posts
osangoqui posted this 01 September 2016

Hi, i have the same problem, my url is maranathainternacional.com, the menu with countries is very long, i need multiline in this menu when the screen is small, very thanks.

Hi, i have the same problem, my url is maranathainternacional.com, the menu with countries is very long, i need multiline in this menu when the screen is small, very thanks.

Last edited 01 September 2016 by osangoqui

Support Team
Support Team posted this 01 February 2016

Hi,

That solution is suitable only for that particular user as you have another class names. If you provide a link to your site, I'll find out what class name you would need to use.

Sincerely,
Hella

Hi, That solution is suitable only for that particular user as you have another class names. If you provide a link to your site, I'll find out what class name you would need to use. Sincerely, Hella
luisalfredo.hernandez
4 Posts
luisalfredo.hernandez posted this 30 January 2016

I also tried the code provided with support on same question from another user, but not works for me . seems like the css code does not load

the css on home->settings are the following

.bd-menu-13.nav-pills .bd-menuitem-20 > a, .bd-menu-13.nav-pills .bd-menuitem-20 > a:link, .bd-menu-13.nav-pills .bd-menuitem-20 > a:visited
{

white-space: pre-wrap!important;
max-width: 180px;
text-align: center;

}

You have any idea what could be the problem?, what settings i must change to multiline works ? thank you very much for your help and time

I also tried the code provided with support on same question from another user, but not works for me . seems like the css code does not load the css on home->settings are the following .bd-menu-13.nav-pills .bd-menuitem-20 > a, .bd-menu-13.nav-pills .bd-menuitem-20 > a:link, .bd-menu-13.nav-pills .bd-menuitem-20 > a:visited { white-space: pre-wrap!important; max-width: 180px; text-align: center; } You have any idea what could be the problem?, what settings i must change to multiline works ? thank you very much for your help and time
luisalfredo.hernandez
4 Posts
Is Solution
luisalfredo.hernandez posted this 30 January 2016

Set width in px for menu items. And put Menu align as "justified".
Or better ignore width and force new line with huge padding left-right values.

Hi Stagger lee, thank you very much for your answer but none of your solutions work for me. the width of menu item is now 200pw but the text remains on one line and exceeds the area without breaking

increase padding and justified alignment of the menu, it does not work

do you have another idea on how to resolve it?

> Set width in px for menu items. And put Menu align as "justified". > Or better ignore width and force new line with huge padding left-right values. Hi Stagger lee, thank you very much for your answer but none of your solutions work for me. the width of menu item is now 200pw but the text remains on one line and exceeds the area without breaking increase padding and justified alignment of the menu, it does not work do you have another idea on how to resolve it?
Stagger Lee
1840 Posts
Stagger Lee posted this 17 January 2016

Set width in px for menu items. And put Menu align as "justified".
Or better ignore width and force new line with huge padding left-right values.

Set width in px for menu items. And put Menu align as "justified". Or better ignore width and force new line with huge padding left-right values.

Last edited 17 January 2016 by Stagger Lee

You must log in or register to leave comments