Hamburger Navigation Menu Image Not Showing Using Css Background-image Property

The burger menu image I have, set to be a background image, is not showing in my navigation bar or on my page. I have set it to appear when the page is responsive (max-width: 480px

Solution 1:

You could go this way:

  .burger-nav img {
   display:none;
  }


@media screen and (max-width:480px) {
  .burger-nav img {
    display:block;
    width:40px;height:40px;
  }
}

<nav class="navbar">
  <a href="#" class="burger-nav"><img src="http://dev.laurentchevrette.digital/images/burger-nav.png"></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>