Having more more than 5 menu items (or having menu items with a large font size) on the main navigation menu will often create a line break and enlarged logo when the screen size reaches a width between 980-1100 pixels (the size of small laptops and large tablets). The most common problem I run into when using Divi’s default navigation menu is when a client wants a lot of top level menu items. If you are committed to perfecting your main navigation menu on ALL screen sizes, chances are you will need to use customize your menu using media queries and adjust certain breakpoints. The point at which these adjustments are made is what we call breakpoints. One of the great things about Divi is that it is built on a fluid grid layout that uses media queries (compartmentalized CSS) to adjust the style of your site for different screen sizes.

Subscribe To Our Youtube Channel Four Solutions for a Crowded Navigation Menu Fixing Your Responsive Navigation Menu in Divi After all, at least for some users, the credibility of your site depends on it. Today, I’m going to give you some helpful solutions for those crowded navigation menus so that they look great even on those not so common screen sizes. I get the menu looking just right for desktop and then you check it on a tablet (especially an iPad Pro) and the logo is overlapping the menu and some of the links have jumped down one line. But for the default menu style with the logo on the left and the menu links to the right, things can easily get shuffled around on smaller screen sizes, especially when you have too many links crowding the header. Thankfully, Divi’s theme customizer allows you to customize the primary menu with some pretty cool header options. I wish it wasn’t that important, but since the navigation is normally at the top of every page of your site, it is the thing that is visible first on every page.

Creating a responsive navigation menu that looks great on all screen sizes can be difficult.

Css force responsive resize