I can't get my jquery code to work when inserting it into a separate js file and not having it in the html. Right now it looks like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/480.js" media="screen and (max-width: 480px)" defer</script>
inside "480.js" it looks like this
document.getElementById("navbar").style.display = "none" {
$('#navbar').hide()
}
You have to check the documentation, a good resource is: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
As you can see there, there is no media attribute for the <script> tag. You can not just invent attributes yourself and assume it works.
You should remove your 480.js file if the above content is all you have written there. Because that's not valid javascript and will only create errors.
To solve your problem, there is no javascript needed. As you can do that all with pure CSS. (See and play with this fiddle: https://jsfiddle.net/u19s432z/)
Just add the following to your css
#navbar {
display: block;
}
@media screen and (max-width: 480px) {
#navbar {
display: none;
}
}