Apologies for the lengthy description, but I want to provide as much detail as possible.
I recently encountered an issue (which I managed to resolve, but the root cause eluded me).
The crux of the problem was that when resizing the browser, specifically at 768px width, the media query failed to trigger. To my surprise, I had to reduce the width by an additional 20-30px before it would respond.
To summarize, the 768px media query only kicked in when the width was under 750px.
Here is a simplified code snippet:
HTML:
<div id="wrapper">
<header id="header">
<a href="" class="logo">
<img src="images/logo-wide.png" alt="logo" />
</a>
<a id="menu_button" href="#">menu</a>
<nav id="nav">
<ul id="menu">
<li><a href="" class="home">Home</a></li>
<li><a href="" class="services">Services</a>
... more navigation list items
</ul>
</nav>
</header>
... remaining irrelevant code
</div>
CSS:
@media screen and (max-width: 768px)
{
div#wrapper
{
max-width:768px;
margin:0 auto;
}
a.logo
{
display:block;
float:left;
width:80%;
padding:25px 0;
height:33px;
}
a#menu_button
{
width:20%;
float:left;
display:block;
padding:50px 0 15px;
height:18px;
}
/* menu
----------------------*/
nav,
#nav
{
width:100%;
float:left;
display:none;
}
ul#menu ul
{
display:none;
}
ul.sub.active
{
display:block !important;
}
ul#menu li
{
float:none;
}
ul#menu a
{
width:100%;
padding:20px 0;
text-align:left;
text-indent: 70px;
display:block;
margin-top: 1px;
}
}
@media screen and (min-width: 769px)
{
div#wrapper
{
max-width:960px;
margin:5px auto;
}
a.logo
{
display:block;
float:left;
padding:20px 35px;
}
a#menu_button
{
display:none;
}
/* menu
----------------------*/
nav,
#nav
{
float:right;
display:block;
}
.activemobile
{
display:block !important;
}
ul#menu li
{
float:left;
}
ul#menu a
{
width:90px;
padding:50px 0 5px;
display:block;
margin: 0 0 0 2px;
}
ul#menu ul
{
display:none;
position:absolute;
margin-left:2px;
right:0;
}
ul#menu li:hover ul
{
display:block;
z-index:999;
}
ul#menu ul li
{
float:left;
}
ul#menu ul li a
{
width:80px;
padding:5px;
font-size:12px;
margin:2px 0 0 2px;
}
...
}
Faulty code snippet:
ww = document.body.clientWidth;// I retrieve this on window resize and page load
var adjustMenu = function() {
if (ww < 768) {
if (!$("#nav").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
...
Corrected code snippet (utilizing Modernizr):
var adjustMenu = function() {
if (Modernizr.mq('(max-width: 768px)')) {
if ($("#nav").hasClass("active"))
$("#nav").show();
else
$("#nav").hide();
...
Any insights into why there was a discrepancy of 20-30px for the non-responsive state within the media query?