I am mobilizing a website using media queries that take effect at 650px and below. For whatever reason, I can not get my navigation menu to center in the page. My navigation menu is in an unorderd list. I spent over an hour in FireBug trying to figure this thing out without any success. Can some css Guru out there please help me with this!!?
Here is the site... http://shoponlinedemo.com/junkyard-zombiez/
Within your @media all and (max-width:650px) section of your css you should make the following changes:
#navigation, .menu {
width:100%;
}
.menu .menu-item {
float:none;
margin-left:auto;
margin-right:auto;
display:block
}
in order for margin:auto to center your content it will need to have a container which takes up the entire width or is centered itself. Also for margin:auto to work the element being centered needs to have a set width.
Since your lis may need to change width and ideally would stay centered regardless of their width, it would be best to have all of the lis in a container that is 100% the width of the browser for mobile, and then center them within that container. this is why you will need to make the navigation and menu divs 100% width.
In addition you cannot center a floated div, so you will need to clear that float from the lis. then simply apply display:block;margin-left:auto;margin-right:auto; and you will have a centered menu!