Archived topic
main menu item max-width
5 replies · Started by Drew on September 21, 2018
I'm trying to find a way to set a max-width value for main menu parent items; the desired outcome is to force a line wrap for items with longer titles.
I have a client that is insisting on using longer titles but whenever I set a max-width value for the .main-navigation li, it seems to apply to the entire menu width.
Likewise, the menu item width settings via Customizer>Layout>primary navigation don't seem to be forcing line wraps.
Many thanks!
What would the wrapped menu items look like on the same line as regular menu items? Having a hard time picturing it with the underline etc..
Any examples?
Sure, here's a quick example via some CSS mock-up of the outcome I'm after: https://www.screencast.com/t/VcTfdkc1
Does that help?
Something like this?:
.main-navigation .main-nav ul li a {
line-height: normal;
max-width: 150px;
text-align: center;
display: inline-block;
vertical-align: middle;
}Thanks, that does the trick. I can adjust the hover animation accordingly, many thanks!
You're welcome :)
