I have a responsive wordpress theme. The menu is coded to hide when the screen size is bellow 740. However it only does this correctly on the home page. If I go to any other page the menu collapses but it fails to hide and I get this error: "Uncaught TypeError: Cannot read property 'clientWidth' of null"
Here's the code, I have it being called in the header.php file of the theme:
var ww = document.body.clientWidth;
$(document).ready(function() {
adjustMenu();
$(".cat").click(function(e) { // cat class
e.preventDefault();
$(this).toggleClass("active");
$(".sf-menu").toggle();
});
});
function adjustMenu() {
if (ww <= 740) { //change this to your breakpoint
$('.sf-menu').hide();
$(".cat").show();
if (!$(".cat").hasClass("active")) {
$(".sf-menu").hide();
} else {
$(".sf-menu").show();
}
} else {
$('.sf-menu').show();
$(".cat").hide();
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
try adding your script at the end of the document. The reason is that, a the beginning your document width is zero, because you content is not loaded yet, so there's nothing to display and so, you width is zero