CODEWITHSUNDEEP
javascripthtmlcss
Tristan N
Tristan N

Reputation: 35

How to hide image on navbar icon press

I am trying to hide an image when the <i class="fa fa-bars"> icon is pressed (on smaller screens), and for the image to show again when it is pressed again.

I am not familiar with JQuery or Javascript and have been trying to do it in CSS with visibility: hidden; but it won't hide the image.

Note- You will need to run this code in a new window and shrink the screen to view the bars.

This is my navbar currently:

And this is when I want the image to be hidden:

ja

.topnav {
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background-color: black;
  padding: 10px;
  -webkit-user-select: none;
}

.topnav a {
  display: inline-block;
  padding: 10px;
  margin-left: 40px;
  font-family: 'Open Sans';
  color: white;
  text-decoration: none;
  transition: ease-in-out;
  transition-duration: 0.3s;
  transition-delay: 50ms;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

.topnav a:hover {
  background-color: rgba(255, 255, 255, 0.884);
  color: black;
  border-radius: 5px;
  transition: ease-in-out;
  transition-duration: 0.4s;
  transition-property: all;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
  .topnav .icon {
    margin-right: 50px;
    margin-top: 5px;
    transition-property: none;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 80%;
    top: 8px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    transition-property: none;
  }
}
<html>

<body>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap" rel="stylesheet">
  <link href="Stylesheetlol.css" rel="stylesheet">

  <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">
    <i class="logo"><img
                src="https://t4.ftcdn.net/jpg/02/77/45/89/240_F_277458983_6C5chZcmha2MymgJySMsiqIxJvzxgmVd.jpg"
                style="height:45px;float:right;border-radius: 3px;-webkit-user-drag: none;"></i>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

Upvotes: 1

Views: 109

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You could simply assign an id (myLogo) to your logo image and use display: none else block in your script when the responsive class is applied to the element.

Live Demo:

function myFunction() {
  var x = document.getElementById("myTopnav");
  var logo = document.getElementById("myLogo");
  if (x.className === "topnav") {
    x.className += " responsive";
    logo.style.display = 'none'
  } else {
    x.className = "topnav";
    logo.style.display = 'block'
  }
}
.topnav {
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background-color: black;
  padding: 10px;
  -webkit-user-select: none;
}

.topnav a {
  display: inline-block;
  padding: 10px;
  margin-left: 40px;
  font-family: 'Open Sans';
  color: white;
  text-decoration: none;
  transition: ease-in-out;
  transition-duration: 0.3s;
  transition-delay: 50ms;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

.topnav a:hover {
  background-color: rgba(255, 255, 255, 0.884);
  color: black;
  border-radius: 5px;
  transition: ease-in-out;
  transition-duration: 0.4s;
  transition-property: all;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
  .topnav .icon {
    margin-right: 50px;
    margin-top: 5px;
    transition-property: none;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 80%;
    top: 8px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    transition-property: none;
  }
}
<html>

<body>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap" rel="stylesheet">
  <link href="Stylesheetlol.css" rel="stylesheet">
  <!--—Navbar and Logo—-->
  <div class="topnav" id="myTopnav">
    <i class="logo"><img id="myLogo" src="https://t4.ftcdn.net/jpg/02/77/45/89/240_F_277458983_6C5chZcmha2MymgJySMsiqIxJvzxgmVd.jpg" style="height:45px;float:right;border-radius: 3px;-webkit-user-drag: none;"></i>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

Upvotes: 1

Related Questions