Reply To: Trouble with menu not centering in both web and mobile responsive design

[bearhead]

I chdecked it out with the developer tools in chrome, and the main issue is coming from the “margin-left: 25%;” you have in the css for the menu ul. Also, that’s why you’re getting that horizontal scroll bar.

You should remove that, now to center everything there’s probably a few ways to go about it, but I think the least disruptive (to your existing code) way to go about it would be to change the following in your css:

.ultimative-nav{
width:408px;
margin-left: auto;
margin-right: auto
}
.wfm-mega-menu{
width: auto;
}
.menu{
width: auto;
/* reme,ber to remove the margin-left: 25%; here!*/
}

now, you’ll also need to create different css for the menu to accommodate screens under 480px wide, as the total menu length is wider than the containing div at that point. You could either shrink the menu text size and padding, or you could change the display style so that they stack.

well I hope that helps a little… what you see in chrome’s dev tools don’t always 100% reflect the code in the actual css file so I’m not totally sure how your code looks.