The text in the navigation menu on my site is overflowing the container in the desktop version (no problem on mobile).

How do I wrap the text to prevent the overflow?

Thanks

The text in the navigation menu on my site is overflowing the container in the desktop version (no problem on mobile).

How do I wrap the text to prevent the overflow?

Thanks

• menus
• css

1 Answer 1

If you use your browser's inspector f12, you can see your list items have this CSS applied...

.sf-menu li {
    white-space: nowrap;
}

You need to change it to...

.sf-menu li {
    white-space: normal;
}

If you already created a child theme you can make the change there. Otherwise, in the admin go to Appearance > Customize > Additional CSS and add the above CSS.