Genesis - How to change spacing around navigation menu links

If you have a lot of links in your navigation menu, your links may shift onto a second line or "run into" the social icons (if your theme has social icons in the navigation menu). In this tutorial, we'll show you some ways to reduce the spacing to allow more links to fit comfortably in the navigation.

This tutorial applies to any 17th Avenue theme.

How to reduce spacing around navigation links

First, let's discuss the different ways spacing can be reduced and how the appearance of links can be changed:

  • Left padding: Adjusts the physical space between the links (to the left of each link)
  • Right padding: Adjusts the physical space between each link (to the right of each link)
  • Letter spacing: Adjusts the space between each letter (i.e. A B O U T  to ABOUT)
  • Font size: Adjusts the font size of the links
  • Text transform: Adjusts the letter-case. You can use use none, lowercase, or uppercase.

We can make these adjustments through CSS code:

.genesis-nav-menu a,
.nav-secondary li a
.header-menu.genesis-nav-menu a,
.site-header .header-widget-area .widget_nav_menu li a {
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}

To add this code to your site, go to WordPress > Appearance > Customize > Additional CSS.

In most cases, you will not need all five of these adjustments. For example, reducing the letter spacing to 1px is quite a drastic difference in many of our themes and will produce a lot of extra space.

Here's what we recommend. Paste the code into the Additional CSS box and then make adjustments from there. You'll be able to see the changes live on your site as you make them. Do you like the font size as it is? Just remove that line. Prefer your links to be more spaced out? Increase the left and right padding to say, 20px. And so on, until you find your preferred configuration!

Note: Generally, the left and right padding should be equal in values (i.e. both 10px or both 20px).