Community Forums › Forums › Archived Forums › Design Tips and Tricks › Nav align and spacing issues – PROSE
Tagged: css, line height, margins, nav align, Prose
- This topic has 10 replies, 3 voices, and was last updated 10 years, 7 months ago by NathanBWeller.
-
AuthorPosts
-
July 6, 2013 at 10:42 am #49530NathanBWellerMember
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/July 6, 2013 at 11:12 am #49538el_steeleMemberHey 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
July 6, 2013 at 11:19 am #49541NathanBWellerMemberOnce 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 🙂
July 6, 2013 at 11:20 am #49542el_steeleMemberAugust 13, 2013 at 1:55 pm #56142NathanBWellerMemberHey 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.
September 17, 2013 at 4:09 pm #63055BeltofTruthSteveMemberNathanBWeller - 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!
September 17, 2013 at 4:41 pm #63066NathanBWellerMemberHey 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;
}September 17, 2013 at 5:00 pm #63070BeltofTruthSteveMemberThanks! Now I just need to figure out how to adjust the spacing and I'll be set.
September 17, 2013 at 5:07 pm #63073NathanBWellerMemberIf you figure that out, please post here too 🙂
September 18, 2013 at 12:19 pm #63247BeltofTruthSteveMemberOkay, 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;
}September 18, 2013 at 12:31 pm #63253NathanBWellerMemberThanks!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.