align li menu items center

Question

i have this css code for my responsive css menu:

nav, ul, li, a {
    margin: 0; padding: 0;
}
a {
    text-decoration: none;
}
.container {
    width: 100%;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#f36f25;
}
.nav:before,.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}

but i cannot get the menu items to align in the centre of the menu/page

here is a fiddle with the full code:

http://jsfiddle.net/5Z2QV/

its a responsive menu so it will be horizontal then when the screen gets too small it will change to vertical — charlie, Oct 28 '13 at 11:46
Take a look here perhaps: http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements — Petra, Oct 28 '13 at 11:50

matewka · Answer 1 · 2013-10-28T12:29:24.950

2

Is THIS FIDDLE what you want?
If so, then you have to remove float from the lis and add display: inline-block to them. Then you have to add text-align: center to the .nav

.nav {
    list-style: none;
    background:#f36f25;
    text-align: center;
    border-top: 1px solid #104336;
}
.nav > li {
    display: inline-block;
}

I also removed border-top from the li and put it in the .nav to remove the gaps between lis.

EDIT:
To keep sub-menu items aligned to the left, add this CSS:

.nav li {
    text-align: left;
}

EDIT2:

You don't need this adjustMenu() javascript function. You can use media queries. Modify your @media section a bit. Add this style:

.nav {
    border-top: none;
}

and replace style for .nav > li with this:

.nav > li {
    display: block;
    border-top: 1px solid #104336;
}

Also, I noticed that in the small range of resolution, one menu item breaks into new line. To prevent this, you can add this style to the .nav

white-space: nowrap;
overflow: hidden;

Here's the update fiddle: http://jsfiddle.net/5Z2QV/9/

edited Oct 28 '13 at 12:29

answered Oct 28 '13 at 12:13

matewka

9,912
2
32
43

YES! someone who understands :) thank you. is there any way it can be how it is but with the sub menu items still aligned left and not centre? – charlie Oct 28 '13 at 12:16
when the page width gets smaller, the menu items all align under each other. when i use your css they dont – charlie Oct 28 '13 at 12:20
See my edit. It resolves the problem with left alignment in sub-menus. Now I'll try to fix your responsive menu. – matewka Oct 28 '13 at 12:20
perfect thanks :) i don't suppose you know how to add background colour on hover and active on the main links? i have tried on a few of the CSS elements but can't get it working – charlie Oct 28 '13 at 12:46
@charlie, you can try with `.nav > li:hover { background: url(image.jpg) no-repeat scroll center center; }` ? – matewka Oct 28 '13 at 13:07

align li menu items center

1 Answers1