Hi thebaht,
Unfortunately the various browsers don’t 100% comply with HTML standards, or they interpret the standards differently.
With unpredictable results, as you have noticed.
Things become even more difficult if you take into account the reduced screen sizes of phones / mobile devices.
The “on top of each other” of your case has 2 levels.
First, it’s the normal behavior of menu for small screen size, it’s the theme’s feature. The breakpoint is 600px.
Second, your site’s menu CSS looks perfect in normal screen width ( more than 960px ) but when scale it down, before the breakpoint, the menu stacks up into 2 lines, this should be adjusted.
How do I adjust it when it is below the 600px?
Thanks
First make a child theme, migrate all your mod to it, and then from now on any changes will be made in child theme only.
Then decide if you really really want to change the small menu behavior in small screen less than 600px, if so then add this in the functions.php of your childtheme.
add_action('wp_print_scripts','mytheme_dequeue_script');
function mytheme_dequeue_script() {
wp_dequeue_script( 'twentytwelve-navigation' );
}
I have added the code but it doesn’t seem to help, the menu still goes to two tier on screens less than 600px?
As I posted earlier, there are 2 things going on. The normal mobile menu behavior of 2012 AND the fact that you align the li and li a with pixel, this causes the 2 tiers problem in screen lower than certain width (specifically, lower than 960px, that you designed it on).
To fix the first issue is to take off the below 600px small menu mechanism, the code above is taking of the JS and still there are some CSS works to be done, mostly inside the menu containters, and it’s a lot because the way 2012 is designed. You have to understand the html structure of menu and the media queries that go with it.
The second issue could be fixed by assign the width as percentage and center align the text inside the liinstead, and use media quiery to make text smaller in small screen. Still you can’t fit 5 menu items with that wordings into 320px width.
