Top level items wrap to a new line

Why items wrap

HTML elements naturally wrap to a new line when there is not enough space to fit in the current row. The same thing can happen with the entire menu bar if there isn’t enough space for it – it’ll be forced to the next line.

For example, if you have a 140px item that is contained within a 650px container, and 560px of the current row is already occupied, that item will naturally wrap to the next row. This is just like with text, where if there is not enough space on the row to fit a word, it wraps and begins a new line.

In a flex layout, text may wrap inside the items instead of entire items wrapping to a new line, but the concept is the same.

Please note this concept applies to an entire menu being forced to the next line; the difference is simply if the theme sets an explicit width wrapper for the menu or not

See the Pen Untitled by Chris Mavricos (@sevenspark) on CodePen.

Remember, the maximum width of your menu is generally set by your theme’s container. While it is possible to adjust this, it is inadvisable, as the theme depends on that maximum width to contain its content and display it properly.

How to prevent wrapping

If you want to fit more items on a single line, you need to reduce the total width of those items.

There are a variety of ways to reduce an item’s width, and the most appropriate will be up to you to decide:

  • Reduce the text (Change “Our Products” to just “Products”)
  • Remove a top level menu item
  • Reduce the Top Level Horizontal Padding in the Customizer (this is generally the simplest approach)
  • Set the Horizontal Item Alignment to Flex to use Flexbox styling (Control Panel)
  • Disable the Submenu Indicators (Control Panel)
  • Reduce the font size (Customizer)
  • Reduce the font weight (Customizer)
  • Reduce the letter spacing (custom CSS)
  • Remove item dividers

Note if you just want to make the menu collapse earlier, you can set a Custom Responsive Breakpoint

On this page