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) but it doesn't show nor does it show when I copy the code to my main CSS above media query (just testing to see if it will show on full page).

<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, name of file is "burger-nav.png":

How can I make the burger nav image show?

回答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>

来源：https://stackoverflow.com/questions/63795307/hamburger-navigation-menu-image-not-showing-using-css-background-image-property

标签

html

css