Nav align and spacing issues – PROSE

Community Forums Forums Design Tips and Tricks Nav align and spacing issues – PROSE

This topic is: resolved

This topic contains 10 replies, has 3 voices, and was last updated by  NathanBWeller 1 year, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #49530

    NathanBWeller
    Participant
    Post count: 12

    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/
    #49538

    el_steele
    Participant
    Post count: 14

    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


    • This reply was modified 1 year, 3 months ago by  el_steele.
    • This reply was modified 1 year, 3 months ago by  el_steele.
    #49541

    NathanBWeller
    Participant
    Post count: 12

    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 :)

    #49542

    el_steele
    Participant
    Post count: 14

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


    #56142

    NathanBWeller
    Participant
    Post count: 12

    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.

    #63055

    BeltofTruthSteve
    Participant
    Post count: 6

    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!

    #63066

    NathanBWeller
    Participant
    Post count: 12

    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;
    }

    #63070

    BeltofTruthSteve
    Participant
    Post count: 6

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

    #63073

    NathanBWeller
    Participant
    Post count: 12

    If you figure that out, please post here too :)

    #63247

    BeltofTruthSteve
    Participant
    Post count: 6

    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;
    }

    #63253

    NathanBWeller
    Participant
    Post count: 12

    Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.