Meganav: Padding options for smaller screens and left align long names

When using multiple columns with a meganav, smaller browsers will start to experience double line menu items. There are some tips to help improve the display and reduce the padding.

Before:

1

Left align long names:

/* -- code to left align long menu items in meganav -- */
.nav--desktop .main-menu>li:first-child a {
    margin-left: 0px;
}
/* - end - */

Result:

2

Reduce padding on the left:

This is an another method which makes the columns slightly smaller. Pushing the content to the left can in many cases give smaller browsers enough room to display longer names. 

/* -- code to reduce left padding in meganav -- */
.nav--desktop .main-menu-dropdown li {
    padding-left: 2px !important;
}
/* - end - */

Tip: You can combine options 1 and 2 together:

/* -- code to left align long menu items in meganav -- */
.nav--desktop .main-menu>li:first-child a {
    margin-left: 0px;
}
/* - end - */

/* -- code to reduce left padding in meganav -- */
.nav--desktop .main-menu-dropdown li {
    padding-left: 2px !important;
}
/* - end - */
3

Reduce padding on top:

This version will push up the menu items higher which can be helpful for long menus.

/* -- code to reduce top and left padding in meganav -- */
.nav--desktop .main-menu-dropdown li {
    padding-top: 0px !important;
    padding-left: 2px !important;
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us