Nav align and spacing issues – PROSE

[NathanBWeller]

I'm attempting to center my top nav menu. I'm also hoping to be able to adjust the margins dictating how much space there is between the primary nav, the title and the sub nav so that it is all spaced neatly. However, I have not been able to get the css right for any of that.

Here is what I've tried in terms of centering the top nav:

/* Primary Navigation
------------------------------------------------------------*/

#nav .wrap {
text-align: center;
}

And here is what I've done to try an add margin space above my sub nav:

/*Secondary Navigation
------------------------------------------------------------*/

#subnav {
top-margin: 20px;
border-top: 1px solid #CBCBC9;
border-bottom: 1px solid #CBCBC9;
}

Any help would be appreciated.

Thanks,

Nathan

http://nathanbweller.com/

[el_steele]

Hey Nathan,

You'll want to change how the ul elements are displayed:

#nav ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

You don't need the float: left or width: 100% since those will be applied to the #nav .wrap.

As for the secondary nav, flip-flop your margin property so that it's margin-top instead of top-margin. Easy mistake. When in doubt, always remember general > specific when working with css property names. You'll also want to move that property to #subnav, since that is the element that has the top border.

Hope that helps! If you don't already work with an in-browser inspector, it's a huge help for frustrating stuff like this. I use chrome's. If you need any help with that, let me know.

---

follow me @el_steele

---

@el_steele | elsteele.com

[NathanBWeller]

Once I had a chance to see the nav in the center I opted to get rid of it altogether. But thanks for the help! The margin tips worked perfectly 🙂

[el_steele]

Haha. No problem. I do that all the time too.

---

@el_steele | elsteele.com

[NathanBWeller]

Hey so I'm back. I'm now attempting to center the elements in my secondary nav menu and once again, not having any luck. I tried using the css you wrote above but it doesn't seem to be working.

[BeltofTruthSteve]

NathanBWeller - I just checked out your site and it looks like you figured out how to center the secondary navigation. Can you share how you figured that out? Thanks!

[NathanBWeller]

Hey BeltofTruthSteve - Yeah, I found another thread where the following code was used. As you mentioned above, it worked for me! Hope it helps you too 🙂

#subnav .wrap {
display: table;
margin: 0 auto;
width: auto;
}

[BeltofTruthSteve]

Thanks! Now I just need to figure out how to adjust the spacing and I'll be set.

[NathanBWeller]

If you figure that out, please post here too 🙂

[BeltofTruthSteve]

Okay, so I had a friend help me figure this out. The following snippets add a vertical divider between buttons, center the buttons, and space them out evenly.

#subnav .wrap {
display: table;
margin: 0 auto;
width: auto;
}

#subnav li {
border-left:1px dotted #31150c;
}
#subnav li:first-child {
border-left:none;
}

#subnav li a {
padding:7px 29px 6px;
}

[NathanBWeller]

Thanks!

[Author]

Posts