Navigation: Reduce padding for top-level menu items
Since your desktop navigation can switch to mobile if the top-level menu items are too long to fit the navigation area, you can try reducing the padding between menu items. This might help you keep your desktop style menu on common browser widths when a little extra room is needed.
Example before:
After:
Code to use:
/* -- code to reduce padding between menu items -- */
.nav--desktop .main-menu>li>a { margin-left: 5px; }
/* - end - */
You can adjust the 5px; value to your needs.
Additional padding changes
If you'd like a tighter drop-down menu, you can use the following code as well.
Example before:
Example after:
Add this additional code:
/* -- code to reduce padding in drop-down menus -- */
.nav--desktop .main-menu>.parent>.main-menu-dropdown { padding: 0 10px 22.5px 10px; }
/* - end - */
Where do I add the code?
Use this link to learn where exactly to add this code snippet: