Can't center nav bar

  • Author
    Posts
  • #780359

    It may be hard to tell, but the text in my nav bar above the header is off-centered. The only reason it almost looks centered is because I have it filled with links, but I would like to center it so I could remove some of those. I’ve tried to obvious things in my CSS, but for whatever reason, I can’t figure it out. Suggestions?

    my site

    The blog I need help with is thesmartcookiecook.com.

    #780524

    This will do it, but there are disclaimers: It blows up if the menu system goes to a second line (goes back to float left).

    #wrapper {
    overflow: hidden;
    }
    
    #nav ul {
    float: left;
    left: 50%;
    position: relative;
    }
    
    #nav ul li {
    position: relative;
    right: 50%;
    }

    Also do this to split the padding on left and right of the menu items so it looks more centered.

    #nav li a {
    padding-left: 7px;
    padding-right: 7px;
    }
    #780528

    That’s okay because I don’t want two lines. So if I get rid of a link or two in the nav this will still be centered?

    #780529

    Try this:

    #nav ul {
    display: inline-block; margin: 2px auto;
    }

    Make sure to test it in a few different browsers.

    Try to remove some of the other unnecessary CSS you added before like “float: center” to take a way some clutter.

    #780530

    Yup.

    #780531

    I should’ve refreshed. :)

    #780532

    Yours is much less complex than mine.

    Use @designsimply‘s solution.

    #780537

    Okay, thank you both!

    #780538

    Okay, now my drop-down menus in the nav bar are cut off.

    #780540

    I’m not seeing anything cut off. All the dropdowns appear complete to me.

    #780541

    Oh, I see. Remove the “overflow: hidden;” from #wrapper.

    #780542

    Try scrolling down to one of the menus that branches off. If you go to “recipes and more” then recipes, the next menu that comes up is cut off on the right.

    #780543

    Ah thank you!

    #780544

    You are welcome.

The topic ‘Can't center nav bar’ is closed to new replies.