Menu Items Wrapping onto Two Lines

If the combined width of your top level menu items exceeds the maximum width available for your menu, the items that don’t fit on the top row will be pushed down and start a new row.

The behaviour of the menu can be compared to a standard paragraph of text (like this one). Words that don’t fit onto the first line will drop onto the next line. The number of words that fit onto the first line depends on how wide your browser is.

Here are some ideas to allow your menu items to fit onto a single line:

  • Set the Responsive Breakpoint to the width at which the menu can no longer fit onto a single line. The menu will be converted to a mobile menu just before it would otherwise wrap onto two lines.
  • Reduce the number of top level items. You can do this by rearranging related top level menu items into a single sub menu
  • Reduce the font size, padding and menu item margin of the top level items so they each take up less space
  • Rename menu items so that they take up less space. E.g. “Contact Us” can become “Contact”, “Skiing” can become “Ski”.
  • Replace menu items with icons. E.g. the word “FaceBook” can be replaced with a FaceBook icon.
  • Increase the available width for the menu to fit into by adjusting your theme styling.

How to reduce the top level menu item padding on smaller screens

Reducing the padding on your top level menu items, as the screen reduces in width, can help allow all of your menu items to sit on one row.

Go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

How to reduce the top level menu item font size on smaller screens

Reducing the font size of your top level menu items, as the screen reduces in width, can help allow all of your menu items to sit on one row.

Go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

 

Related Articles