How do I prevent the text overflow in menu?

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.

Related Posts:

  1. How to move parent li to end of child ul
  2. Override custom menu widget
  3. When at / ( or “home”) my menu doesn’t get a current-menu-item class
  4. How to change Twenty Seventeen theme’s navigation bar location?
  5. Custom Post type menu highlighted in the archive/post
  6. WordPress – site with 2 stylesheets and more…
  7. Add nav menu CSS class to body
  8. Vertical Sidebar Menu Parent and Child not displaying correctly [closed]
  9. How to insert custom code into wp_nav_menu structure?
  10. remove everything from wp_nav_menu
  11. Editing WordPress Nav Menu Walker
  12. WordPress Admin Bar Covering & Overlapping Fixed Menu Header [closed]
  13. Add class active to static menu
  14. Add CSS to head depending on nav menu walker
  15. Grey out nav buttons unless is_user_logged_in()
  16. Add a class at specific element in custom Menu Walker
  17. CSS for Created Menu “Active Selected” not working, everything else is!
  18. Side Menu Icon Expandable
  19. wp_nav_menu not working [closed]
  20. create a 2 row menu in wordpress
  21. Making nav menu sticky and transparent
  22. current-menu-item class in CSS
  23. Static page to one page- menu inactive items highlighted
  24. CSS Classes (optional) on menu is not showing
  25. Switch from hover to click on Twenty Twelve Menu
  26. How to style a specific nav menu item?
  27. How Do I Add Images To Main Navigation Menu
  28. Excluding a media query from specific pages
  29. My Temptation theme is showing two of the same menu at the top. How do I remove the one that the theme comes with? Please help! [closed]
  30. How to change the color of a menu item [closed]
  31. display menu as table layout
  32. WordPress + Bootstrap [closed]
  33. styling wp_nav_menu – horizontal, sub-menu drop downs
  34. Menu Arrow for Child Element
  35. Trouble hiding menu on single page
  36. change hover color of specific menu link [closed]
  37. How to add css to single navigation text? [closed]
  38. Navigation menu not visible (contrast issue) on home page
  39. Full screen nav menu block with avada theme
  40. How do I change/remove styling (top border) on main menu for active page and hovering (Avada Theme)
  41. Hide pages from the main menu
  42. Odd spacing in Navigation Bar [closed]
  43. Controlling sub-menu within sub-menu
  44. How to manipulate attributes of url-less dropdown item in a the custom wordpress menu?
  45. Using CSS ID’s and Classes with images in a WordPress Horizontal Menu
  46. Is there any way to change the CSS class applied to 2nd level sub menu ul’s?
  47. Custom menu styling
  48. Styling issue with custom menus and sub menus
  49. Determining the “current_page” in WordPress Custom Menus
  50. New wp menu menu styling
  51. Child pages don’t become submenus (as in the twenty-ten theme)?
  52. Secondary Menu Not Functioning as a Sticky Menu
  53. I’m trying to remove a duplicate menu, which only appears on the homepage?
  54. Im having trouble centering menu items in footer due to “flexbox”
  55. Menu items not clickable
  56. How to add CSS class to and and id in a nav menu with code?
  57. Change hover to onclick on menu
  58. wp_nav_menu container style args
  59. Add/remove image from navigation bar
  60. Stuck while adding bootstrap navwalker class
  61. How to swap text in menu item back and forth?
  62. How to create a mobile menu full screen overlay using Understraps Bootstrap 4 theme
  63. Disable Top Nav Bar on Mobile
  64. How to get rid of the bottom line in the navigation menu via CSS file?
  65. Active Current Menu – Adding class to child theme
  66. Making my main menu a hamburger menu on all platforms
  67. WordPress menu issue after update
  68. Adding span to a particular text in an menu item
  69. Get Sub-Menu Dropdown to Show Over Page Content
  70. Problem with positioning of the menu in custom WP style
  71. How can I make menu items into two seperate buttons with different functions?
  72. Responsive Dropdown Menu
  73. Vertical Menu items shifting to same line when window size increased [closed]
  74. Adding two same css class on menu item
  75. Two questions about CSSing inside the menus
  76. Always show wordpress submenu on responsive header menu
  77. jQuery not working when used with wordpress menu
  78. Theme: Twenty Thirteen Mobile Sliding Menu Doesn’t Bump Content Down
  79. Can’t style custom menu
  80. individual images as navigation design TwentyTen
  81. Specifying Class style for Menu
  82. Bought custom navigation menu from codecanyon, how to change feature.php?
  83. Menu Underline shows without Hover after adding subitems
  84. Creating a Horizontal menu
  85. Any plugin to make a 3 levels menu? [closed]
  86. How to add or remove borders in navigation menu?
  87. wp nav menu – highlighting current page not working properly [closed]
  88. Why there is a gap between and it’s container (A drop down menu in wordpress) [closed]
  89. Keeping my Sub Menu open when hovering on its list items
  90. How to centre menu items on horizontal nav bar? (e.g. make margins equal) [closed]
  91. How to change first letter of active menu item
  92. Site navigation sits unstyled for a second on page reload [closed]
  93. Formatting WordPress Menus (without bullets, inline with text)
  94. Changing when mobile menu is displayed
  95. how to add permalink/slug to wordpress custom link menu item
  96. How can I only show one responsive menu on mobile devices?
  97. Active Navigation Class Based on URL on icon
  98. Twenty-Twenty-Two Child Theme Mega Menu
  99. Hiding Widget On Mobile Devices Removes Our Product Search Box On Mobiles
  100. Rename Menu icon in Twenty seventeen theme