How To Fix the Divi Menu with the PAJ Divi Menu plugin

by phillip | Jan 16, 2018 | Quick Tips, wordpress, Wordpress Plugins

Facebook
Twitter

A common problem when using Divi’s default navigation menu is when a client wants a lot of top-level menu items or wants menu items with a large font size on the main navigation menu. This can often cause a line break and split the menu into two lines when the website is viewed on certain screen sizes.

By using this plugin you can increase the menu breakpoint which allows the mobile menu to be used at a greater screen width and prevent the desktop menu line break.

Facebook
Twitter

Menu Line Break

To use the plugin you must first download and install it using the usual method

Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress.

After activating go to Divi → Theme Customizer, at the bottom of the customizer you will see the new item ‘PAJ Divi Menu Options’.

Facebook
Twitter

Theme Customizer

Find the width where the Divi Menu Breaks

If you are using the Google Chrome Browser, make sure the customizer is closed and you are viewing your webpage.
Right-click on the page to bring up the context menu and click on inspect.
This will open the developer tools panel.

Facebook
Twitter

Resize the width of the page, at the top right of the webpage, you will see a small box with the dimensions of the page. As you resize the page the width dimension changes.

When you see the Divi menu break to a new line, check the width of the page.

This is the width value that you will use with the plugin.

Close the developer panel and open the Theme Customizer.

Then click on PAJ Divi Menu Options.

You can then use the Menu Breakpoint slider to set the width value found previously.

The Divi desktop menu will then change to the mobile menu when the browser width becomes less than the entered value.