jQuery Burger Menu not working and not clickable

Question

Please find below my website's address:

I have a problem with my website jQuery burger menu. When I put some jQuery script, the menu was working. But, it has some display problem. So,I remove it and put another jQuery script. Then, nothing was working. Finally, I put back the first jQuery script, but now, it's not working at all. I mean it's not clickable.

Is there anyone who knows where is the issue and how to fix it?

Here is my current website source code :




 
 




    Comment Choisir un Pommeau de Douche Économiseur d'Eau ? Le Guide d'Achat

    













  
    
         
        
            
            
                
                    Guide d'Achat
                    Comparatif
                    Top 10
                    Marques
                    Tests
                    Blog
                
            
        
    
    

    

      

        COMMENT CHOISIR UN ÉCONOMISEUR D’EAU ? LE GUIDE D’ACHAT

        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor in cididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra

      LIRE LA SUITE      

      

        

        

        

        

        

        

      

    

    
    
      
      Copyright © 2021 - Économiseur d’Eau - Tous droits réservés

And below is my website's CSS code:

@charset "utf-8";
/*Global / Desktop View*/
header {
  background-color: rgba(0, 0, 0, 0.70);
  padding-left: auto;
  padding-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
nav {
  margin-right: 10px;
}
.mobile-view {
  display: none;
}
.desktop-view ul li {
  list-style-type: none;
  display: inline-block;
}
.desktop-view ul li a {
  padding-right: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
body {
  font-family: josefin-slab;
  font-style: normal;
  font-weight: 100;
  color: #EAEAEA;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.hero-image {
  height: 450px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0%;
  padding-top: 20px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-right: 10px;
  padding-left: 10px;
  background-image: url(images/economiseur-d-eau-hero-image-arriere-plan.webp);
}
main {
  min-height: 800px;
}
footer {
  height: 100px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 0px;
}
.social-icons {
  float: left;
  margin-top: 10px;
}
.copyright {
  float: right;
  color: #000000;
  margin-top: 20px;
}
.facebook-icon {
  margin-right: 20px;
}
.twitter-icon {
  margin-right: 20px;
}
.email-icon {
  margin-right: 0px;
}
.hero-content {
  margin-top: 50px;
  margin-left: 0px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.guide-achat {
  color: #000000;
  font-size: 32px;
}
p {
  font-size: 16px;
  color: #000000;
  margin-bottom: 30px;
}
h1 {
  color: #000000;
  font-family: josefin-slab;
  font-style: normal;
  font-weight: 700;
}
hr {
  border-style: solid;
  border-color: #000000;
  margin-top: -10px;
  margin-bottom: 30px;
}
.btn-black {
  background-color: #000000;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
.image-grid {
  margin-top: 150px;
  margin-bottom: 20px;
}
.col {
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.col-lg {
  width: 31.3%;
}
.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}
.image-grid:after {
  clear: both;
  display: block;
  content: "";
}
.text-white-description {
  color: #FFFFFF;
  font-size: 30px;
}
.text-red {
  color: #FF0004;
}
.logo {
  margin-left: 10px;
}
/*Tablet View*/
@media (min-width: 401px) and (max-width: 768px) {
  .mobile-view {
    display: block;
  }
  .desktop-view {
    display: none;
  }
.expand {
    display: block !important;
}

  h1 {
    font-size: 24px;
  }
  .hero-content {
    margin-left: 25px;
    margin-right: 25px;
  }
  .col-md {
    width: 48%;
    margin-top: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
}
/*Mobile View*/
@media (max-width: 400px) {
  .mobile-view {
    display: block;
  }
  .desktop-view {
    display: none;
  }
.expand {
    display: block!important;
}

  .hero-image {
    height: 350px;
  }
  h1 {
    font-size: 20px;
    margin-top: -20px;
  }
  .hero-content {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
  }
  .hero-content hr {
    display: none;
  }
  .hero-content p {
    font-size: 14px;
  }
  .col-xs {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 50px;
    padding-top: 0px;
    margin-top: -20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  .logo {
    width: 50%;
    height: 50%;
  }
  footer {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 24px;
  }
  .social-icons {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 40px;
  }
  .image-grid {
    margin-bottom: 0px;
    padding-top: 80px;
    margin-top: 0px;
  }
  .facebook-icon {
    margin-right: 35px;
  }
  .twitter-icon {
    margin-right: 35px;
  }
  .email-icon {
    margin-right: 35px;
  }
  .copyright {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 40px;
  }
}

Also, you can check the jQuery scripts that I used as followed:

$(document).ready(function(){
    $('.mobile-menu').click(function(){
        $('.desktop-menu').toggleClass('expand');
    });
});

I linked a jQuery library to my source code as below:

And I also linked this script file called "scripts.js" to my source code as below:

Finally, I didn't forget to apply the CSS class called .expand for my website tablet and mobile views, as you can see below:

/*Tablet View*/
@media (min-width: 401px) and (max-width: 768px) {
  .mobile-view {
    display: block;
  }
  .desktop-view {
    display: none;
  }
.expand {
    display: block !important;
}


/*Mobile View*/
@media (max-width: 400px) {
  .mobile-view {
    display: block;
  }
  .desktop-view {
    display: none;
  }
.expand {
    display: block!important;
}

I think I explained all the codes I have been doing.

Is there anyone who knows where is the issue and how to fix it?

I did put comments to my question, but I'm not sure you guys are able to see them. So, I write an anwser to my question again with the same comments. Hopefully, you'll see them and answer to them.

Below, are my previous comments:

"Indeed, I made a mistake with the CSS classes. So I replaced .desktop-menu and .mode-menu respectively by .desktop-view and .mode-view. And now, it works very well!

But, I just discovered a new problem. Indeed, when you click on the burger menu, the navigation elements break the design of the logo, the menu and the image under the menu. Do you know what the error is in my CSS code or my HTML code, or in my jQuery code? Could you please help me to fix this issue?"

brice · Accepted Answer

You are referencing classes mobile-menu and desktop-menu in your js/scripts.js but those classes don't exist in the HTML (they are mobile-view and desktop-view).

jQuery Burger Menu not working and not clickable

Answers (1)

Related Questions