I want to change my header.php file for mobile devices. I've tried this javascript solution but it doesn't write the php file. How can I fix this?
<script language=javascript>
if (screen.width >= 720 )
$('#header').load('header.php');
else (
$('#header').load('header-mobile.php');
)
</script>
<div id="header"></div>
Thanks
Why do you want to import different files? You could use media queries with css and add a class to each type of header like this:
<div class="mobile-header">
</div>
<div class="header">
</div>
And in CSS you just hide it/show it with media queries:
.header-mobile {
display: none;
}
@media (max-width: 600px) {
.header {
display: none;
}
.header-mobile {
display: block;
}
}
This means that your .header-mobile div is going to be hidden, unless your window size is 600px or less, in that case, your .header is going to be hidden.
Hope it helps!