The burger menu image I have as a background image is not displaying in my navigation bar or on the page.
I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above the media query to test if it would display on the full page, but no luck.
<nav class="navbar">
<a class="burger-nav"></a>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#">CASINO</a></li>
<li><a href="#">HOTEL</a></li>
<li><a href="#">ENTERTAINMENT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">MEMBERS</a></li>
<li><a href="#">JOIN</a></li>
</ul>
</nav>
@media screen and (max-width: 480px){
.burger-nav{
display: block;
background-image: url(../images/burger-nav.png);
background-repeat: no-repeat;
height: 40px;
width: 100%;
color: red;
background-color: blue;
}
}
This is the path of my image, the file name is "burger-nav.png":
https://i.sstatic.net/voAqQ.png
Any suggestions on how to make the burger nav image show up?