How to reduce spacing around navigation 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.

All of our themes use the same basic coding for navigation menus, so 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:

  • 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

We can make these adjustments with a simple code snippet:

.genesis-nav-menu a {
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: 1px;
    font-size: 11px;
}

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

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

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 and so forth!