How can I toggle the visibility of an image when the bars icon is pressed on smaller screens, using CSS without JQuery or JavaScript?
I have attempted to hide the image with visibility: hidden; in CSS but it does not work as intended.
Please run this code in a new window and resize the screen to view the effect.
This is my current navbar:
https://i.sstatic.net/RAehe.png
And this is how I want the image to be hidden:
https://i.sstatic.net/Iz5yx.png
.topnav {
// CSS styles for top nav bar
}
// Other CSS styles
@media screen and (max-width: 600px) {
// Media query styles for smaller screens
}
<html>
<body>
<!-- HTML body content -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!--—Navbar and Logo—-->
<div class="topnav" id="myTopnav">
// Navbar and logo content here
</div>