How to center menu in Fresh & Clean

  • Author
    Posts
  • #957826

    lovefurall
    Member

    Hey all. I’m trying to get my nav menu text to be centered. As of right now, it looks like it’s aligning to the left. If I could get it centered, that would be oh so awesome. Thanks in advance!

    The blog I need help with is lovefurall.com.

    #957938

    This will do it for you, but one note on this: If your menu goes to two lines, this solution will “blow up” and everything will revert to the left float it had originally. There isn’t anything that can be done about that as far as I know.

    .menu-menu-container {
    text-align: center;
    }
    ul.menu {
    display: inline-block;
    }
    #957939

    lovefurall
    Member

    Awesome, thanks a ton!

    #957940

    lovefurall
    Member

    Ok, so I added the css and things look…slightly centered. I just measured it and it’s a few centimeters off balance. You can see it’s not quite right just by looking at it. Any idea what would cause this?

    #957987

    They had some left padding to keep the text from being too close on the left. Add this to get rid of that padding.

    #access {
    padding-left: 0;
    }
    #958013

    lovefurall
    Member

    Hmmm, is their a specific spot I should be adding this code (beginning, middle, end) in relation to…

    .menu-menu-container {
    text-align: center;
    }
    ul.menu {
    display: inline-block;
    }

    I can’t seem to get the padding to work no matter where I add it, it’s still of center.

    #958028

    You can add it anywhere in your custom CSS since there isn’t anything in your custom CSS that would cause an issue with it. When I add it to your custom CSS via Firebug, the menu shifts to the left and using “measure it” in Firefox, I come up with 140px on both sides after I add it.

    #958030

    lovefurall
    Member

    I’m not sure why it’s not working for me :( But I went in and did…

    #access {
    padding-right:140px;
    padding-left:100px;
    }

    Looks pretty even to me now, so I guess I’ll leave it like that. Don’t have Firebug, but may add it and mess around.

    Thanks again!

    #958031

    Here is the thing with your solution: any change to the menu will require that you go in and adjust those numbers.

    I checked my solution in Firefox and also in Safari and in both it is centered with the code I gave. What happens with other browsers such as Chrome or IE I have no idea. If you are using a browser that is rendering things weird, and you make the adjustment for that browser then you will make things off for everyone else.

    Right now in Safari and Firefox, your menu is off center by 20px (the 40px difference in your settings – the 20px left padding in the original CSS).

    It may look right to you, but a substantial number of others are going to see the menu off center.

    Perhaps just go back to left aligned and then it won’t matter what browser someone is using.

    #958098

    I checked http://lovefurall.com/ and it looks correct to me with the first padding option thesacredpath posted that uses “padding-left: 0”.

The topic ‘How to center menu in Fresh & Clean’ is closed to new replies.