Skip to main content
  1. Home
  2. Support
  3. Questions

How can I reduce the space between the menu items in the top nav?

Dean Draper By 
August 16, 2013

I want to fit more items across the screen in the top nav, I can reduce the font size, but I also want to reduce the space between items as they appear horizontally across the screen.

Item     Item     Item    Item

to:

Item  Item  Item  Item

Official response from

The exact answer to this question will vary depending on your site's theme, but broadly speaking you'll want to:

  • isolate the individual CSS selector that is affecting the width of your top-nav buttons; and
  • change the relevant styles on that selector (likely its width or padding). 

You'll be able to identify that selector using your browsers developer tools and edit in your theme's CSS file. If you're having difficulty with either of those two steps, I would recommend reaching out to one of our certified NationBuilder Experts. 

Share this post

Showing 18 reactions

How would you tag this suggestion?

Sign in with

Please check your e-mail for a link to activate your account.
  • Ian Patrick Hines


    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    responded with completed
    posted 2016-06-08 15:21:48 -0700
  • Julius Rainey
    commented
    Sorry but I am not clear with your instructions. Where do I place the liquid?
    posted 2015-02-14 13:57:20 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    The code isn’t showing up correctly. Send me an email brad (at) fourtierstrategies (dot) com and I’ll send it to you.
    posted 2015-02-14 13:56:23 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Grrr. I HATE how hard it is to post code in here. underneath the opening if statement you add
    posted 2015-02-14 13:54:36 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    That one is a little tougher as the healine-bar is a common across multiple page types and is driven from the layout.html file.

    You’ll need to into that file and add this liquid. 
    {% if page.slug == ‘donate’ %} 

.headline-bar {
display: none; 

{% endif %}


    Not including the code tags.
    posted 2015-02-14 13:51:23 -0800
  • Julius Rainey
    commented
    So enter enter the liquid into the layout.html file and the change the css into the tablet and desktop scss file. Can I keep you on speed dial? You are the first person that has ever helped me before.
    posted 2015-02-14 13:51:16 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    That one is a little tougher as the healine-bar is a common across multiple page types and is driven from the layout.html file.

    You’ll need to into that file and add this liquid.

    {% if page.slug == ‘donate’ %}

    .headline-bar {
    display: none;

    {% endif %}
    posted 2015-02-14 13:49:26 -0800
  • Julius Rainey
    commented
    Brad Marston..I am sending you a drink of choice through the computer..LOL. It worked.

    Are you able to help me understand something else, on the donate page, there’s a bar that has donate on it, I wont it gone. Wouldn’t I make changes to the template file for that donate page.
    posted 2015-02-14 13:34:39 -0800
  • Julius Rainey
    commented
    Yeah I realize that it is nested…give me a second..I am determined to find this…it’s driving me crazy…LOL.
    posted 2015-02-14 13:31:36 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    If you find nav {
    …
    li {

    the padding style is actually below that in

    a {
    posted 2015-02-14 13:29:38 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Not sure what to tell you. I looked at an old CityZens theme I worked on and that’s where I found it. Have you tried going to the Homepage and using Inspect Element to see what you are looking for?
    posted 2015-02-14 13:26:58 -0800
  • Julius Rainey
    commented
    Still don’t see it..this is odd….shouldn’t i be able to do a search for li and it bring it up, well in addition to other words with li.
    posted 2015-02-14 13:21:50 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Okay. It should be around line 300. li { display: inline-block; margin: 0 10px 10px 0; position: relative; background-color: $theme-color-4; border: 1px solid darken($theme-color-4, 3); line-height: 55px; @include border-radius(2px); a { display: block; width: 100%; height: 100%; color: $theme-color-2; padding: 0 15px;
    posted 2015-02-14 13:19:28 -0800
  • Julius Rainey
    commented
    Brad I did that, actually did the search in that particular file..i actually searched for nav li a, .subnav li a. I am modifying the CityZen theme…
    posted 2015-02-14 13:08:30 -0800
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Julius. Look in the tablet and desktop scss file.
    posted 2015-02-14 13:05:14 -0800
  • Julius Rainey
    commented
    I don’t see this in that style sheet..can someone help me.
    posted 2015-02-14 12:59:54 -0800
  • Dean Draper
    responded
    posted 2013-08-20 14:32:54 -0700
  • Brad Marston




    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Dean,

    Find the nav li element in the theme scss and reduce the padding.

    Example:

    nav li a, .subnav li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #262261;
    padding: 0 15px;
    }

    nav li a, .subnav li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #262261;
    padding: 0 5px;
    }

    That will create the desire effect.
    posted 2013-08-20 10:32:12 -0700

Status key

  • Answered: The question has been officially answered
  • Incomplete: More information is needed to answer the question