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: