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

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.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *