Archived topic
Break menu words in two lines
3 replies · Started by dorian on April 9, 2021
Hey guys,
Appreciate your help so far, you are the most helpful support on the internet!
I have used the below CSS as mentioned in other topics, and broke the menu with <br />:
/* break menu words */
.main-navigation .main-nav ul li a,
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: inherit;
padding-top: 10px;
padding-bottom: 10px;
}
Is there any way to prevent words breaking in the mobile menu - or at least minimize the padding space between the words so they are close together?
Hi Dorian,
The CSS here is not the reason that the menu breaks, did you directly add the <br> into the navigation label?
If so, I would recommend you to create another set of menus without <br> in the navigation label, assign it to the off-canvas panel.
Let me know :)
Aaaaahhhh, very simple solution. OMG.
Thanks Ying!
Edit: yeah, I know it was not due to CSS - but I am mind blown as I always look at things complicated while some things like this are an easy fix.
No problem :)
