Loopstudios-landing-page(Html,Css,Js)

Community feedback

• 

  Jesse•430

  @jesse10930Posted over 3 years ago

  Great project, Pranav! Another option to fixing the issue you raised is to create a class to toggle on the hamburger image, the same way you do for the '.active' class. Something like:

  .hide {
     display: none;
  }
  

  So when the hamburger is clicked, its image will not be displayed. When the close is clicked, the hamburger will come back into view. Hope this helps!

  Marked as helpful

  0

  ---

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @jesse10930 Thanks you Jesse for the suggestion, so I have to put hamburger-image. hide just like hamburger-image. active, right?

  0

  

  Jesse•430

  @jesse10930Posted over 3 years ago

  @pranav1597 Well, you'd have to look at the way your document is structured and toggle "hide" class on the image(s) you want to disappear and reappear. Looking at your code, you'd likely have to move some things around to implement this solution. HTML:

  <a href="#" class="hamburger-icon">
      <img src="images/icon-hamburger.svg" alt="" class="hamburger-image" id="ham-img">
      <img src="images/icon-close.svg" alt="" class="close-image hide" id="close-img">
  </a>
  

  CSS:

  .hide {
      display: none;
  }
  

  JavaScript (placed inside the 'onclick' function you have):

  document.getElementById('ham-img').classList.toggle('hide');
  document.getElementById('close-img').classList.toggle('hide');
  

  The ".hamburger-image.active" wouldn't be needed anymore.

  So the idea is that the "hide" class goes back and forth between the hamburger image and the close image when the user clicks the image that is displayed. The image that is clicked disappears and the other image appears.

  1

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @jesse10930 Okay, Thanks for the help Jesse.

  0
• 

  Anurag Singh•1,265

  @exist08Posted over 3 years ago

  when it comes to use a svg as image use a div and then set the background-image of svg ,, when div.active change background-image ,,, hope it'll help

  1

  ---

  

  Pranav•500

  @pranav1597Posted over 3 years ago

  @exist08 Thanks Anurag for the help, I will look into it.

  0