Archived topic
Menu wrapping
3 replies · Started by John on September 8, 2020
How do I wrap menu items? I have a site that has 9 (ugh) menu items and like 2 of them are Technology Solutions As a Service and Professional Technology Services. I have 0 wiggle room to make that Technology SAAS.
So am wanting to make it instead of
Technology Solutions As a Service
Technology Solutions
As a Service
(ideally centered, but broken onto 2 lines).
Thanks for the help!
Hi there,
You can use the <br> tag in navigation label field.
Let me know if this helps :)
Here I was thinking of something fancier :)
Hi John,
To add to Leo's suggestion. You may have to add CSS.
You can try this CSS code to adjust the line-height,paddings,margins and text alignment:
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
padding-left: 25px;
padding-right: 25px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 20px;
text-align: center;
}
.main-navigation .main-nav ul{
display:flex;
flex-direction: row;
align-items: center;
}We also added "align-items" so it will be vertically centered, you can remove this if you prefer top alignment.
