I'm encountering an issue with resizing a menu. The code I have works fine on all browsers except Chrome.
Describing this problem in words is tough, so I'll provide some screenshots to better illustrate the issue.
This is how my menu appears initially:
Upon resizing the browser window to <=605px, the jQuery code should remove the left float and align the items in a centered column. However, in Chrome, it looks like this:
Here's the code snippet:
HTML:
<div id="containerMenu">
<div id="menu">
<ul>
<a href="index.html"><li>HOME</li></a>
<li>SERVIZI</li>
<a href="wedding.html"><li>WEDDING</li></a>
<a href="food.html"><li>FOOD</li></a>
<a href="contatti.html"><li>CONTATTI</li></a>
</ul>
</div>
</div>
CSS (relevant sections only):
#containerMenu {width:100%; text-align:center;}
#menu {display:inline-block}
#menu li {float: left;}
jQuery:
$(window).resize(function()
{
if($(window).innerWidth() <= 605)
{
$("li", $("#menu")).css("float","none")
}
else
{
$("li", $("#menu")).css("float","left")
}
})
I also have code that applies when the window is opened with a width <= 605, but it's essentially the same as above without the .resize() event.
Can anyone assist me in making this code compatible with Google Chrome?
Thanks, Stefano