CODEWITHSUNDEEP
javascripthtmlcss
pranav1597
pranav1597

Reputation: 17

When i click on the hamburger icon, the icon overlaps the close icon. How to remove the hamburger icon when I click on it so that close icon can show

Here is the code below, hamburger icon appears when the width less than 375px. I only added the navigation part of HTML and CSS. I have a problem with removing the hamburger icon as it overlaps the close icon. Link for this project https://pranav1597.github.io/loopstudios-landing-page/

index.html

<nav class="nav-header">
      <div class="nav-flex">
        <div class="nav-logo">
          <img src="images/logo.svg" alt="brand-logo" class="brand-logo">
        </div>
        <div class="nav-list">
          <div class="hamburger-nav">
            <a href="#" class="hamburger-icon">
              <img src="images/icon-hamburger.svg" alt="" class="hamburger-image">
            </a>
            <div class="hamburger-link">
              <a href="#" class="nav-link">About</a>
              <a href="#" class="nav-link">Careers</a>
              <a href="#" class="nav-link">Events</a>
              <a href="#" class="nav-link">Products</a>
              <a href="#" class="nav-link">Support</a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="nav-info">
        <p class="nav-info--title">Immersive experiences that deliver</p>
      </div>
    </nav>

style.css

*{
    box-sizing: border-box;
}

body{
    margin:0;
    padding:0;
    font-size: 15px;
    font-family: 'Josefin Sans', sans-serif;
}


/* navigation + header */
.nav-header{
    background-image: url(images/mobile/image-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-bottom: 20em;
    /* border: 2px solid red; */
}

/* flex of brand logo and nav links */
.nav-flex{
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1em;
    padding-top: 2em;
}

/* brand-logo */
.brand-logo{
    width:70%;
}

.hamburger-nav{
    /* border: 2px solid red; */
    /* display: none; */
}

/* hamburger navbar */
.hamburger-icon{
width:90%;
}

.hamburger-link{
    /* border: 2px solid red; */
    display: none;
    position: absolute;
    left: 1em;
    margin-top: 2em;
    width: 90%;
    text-transform: uppercase;
}

/* nav links */
.nav-link{
    color:white;
    text-decoration: none;
    display: none;
    display: block;
    padding: .5em 0;
}

/* active states */

.nav-header.active{
    background: black;
    background-image: none;
}

.hamburger-image.active{
    background-image: url(images/icon-close.svg) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

.hamburger-link.active{
    display: block;
  
}

.nav-info.active{
    margin-top: 20em;
}

/* nav header title */

.nav-info{
    border: 1px solid white;
    margin: 0 auto;
    margin-top:14em;
    width: 90%;   
    color:white;
    padding: 1.5em 1.5em;
}

.nav-info--title{
    text-transform: uppercase;
    font-size: 2.5em;
    width: 90%;
    /* border: 2px solid red; */
    margin: 0;
}

script.js

const hamIcon = document.getElementsByClassName("hamburger-icon")[0];
const navLinks = document.getElementsByClassName("hamburger-link")[0];
const navHeader = document.getElementsByClassName("nav-header")[0];
const iconClose = document.getElementsByClassName("hamburger-image")[0];
const navInfo = document.getElementsByClassName("nav-info")[0];



hamIcon.addEventListener('click', () => {
    
    navLinks.classList.toggle('active');
    navHeader.classList.toggle('active');
    iconClose.classList.toggle('active');
    navInfo.classList.toggle('active');
  

})

Upvotes: 0

Views: 76

Answers (2)

Cfomodz
Cfomodz

Reputation: 516

So since you are wanting something that changes the attributes of an element when something is clicked and you are already using js, this is a perfect application of the onclick attribute.

in your HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

in your js

function openClose() {
    jQuery('hamburger-image').attr('src', 'images/icon-close.svg');
}

In your CSS for .hamburger-image.active{ remove

background-image: url(images/icon-close.svg) !important;

and back in your HTML change <a href="#" class="hamburger-icon"> to

<a href="#" onClick="openClose()" class="hamburger-icon">

Upvotes: 0

Kate
Kate

Reputation: 186

Add

.hamburger-image.active {
width:0;
height:0;
padding:10px;
}

so the background is displayed but not the foreground.

Please let me know if this helps :-)

Upvotes: 1

Related Questions