Menu tabs overlap in Opera mini simulator

Hi, I’m adapting a site for mobiles using media queries and one of the issues I have is that the menu tabs
overlap in the opera mini simulator The test page is

Any idea on how to stop the overlapping? Thanks.

Just a shot in the dark because I don’t have a way to test…

But on #navigation a{} try changing it to display:inline-block; and remove the min-width set on it.

Thanks, but that doesn’t seem to work. Now I’m trying to find an alternative solution, maybe <ul> list or something…ideally I would like to have a horizontal

menu, in 2 horizontal lines for mobile screens, with 1 horizontal line for laptop screens (using block type backgrounds for each link).

It’s much better to wrap menu links in an unordered lists anyhow. E.g.

<ul id="navigation">
  <li><a href="">Level test</a></li>
  <li><a href="">Exercises</a></li>   
  <li><a href=""> Prices</a></li>
  <li><a href="#">Pronunciation</a></li>

Then float those <li>s left, or set them to display: inline-block. That will be a much more bulletproof menu.

And if you still want it centered you can just give that #navigation list, in Ralphs code, a width and margin:0 auto; to center (it will also need overflow:hidden; to contain the floated links now) :). That’s assuming you go the floating route.

But I hear floats and media queries don’t go well together…I have just tried the <ul id=“navigation”> idea. The links now appear vertically, but maybe I didn’t do it correctly - I will try a few other things. Thanks a lot!

You could also try display: inline-block instead to make them go horizontal. Here are some links with more details and examples: