Need help? Check out our Support site, then


How to center menu in Fresh & Clean

  1. 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.

  2. 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;
    }
  3. Awesome, thanks a ton!

  4. 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?

  5. 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;
    }
  6. 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.

  7. 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.

  8. 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!

  9. 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.

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

Topic Closed

This topic has been closed to new replies.

About this Topic