The hamburger menu on the responsive navbar fails to open when clicked on

Having an issue with my navbar in mobile and responsive environments. The hamburger menu shows up, but when clicked on, the links are not displayed. Below is the code that I am using, all the necessary links are included but the menu is not functioning properly.

$('.navTrigger').click(function() {
  $(this).toggleClass('active');
  console.log("Clicked menu");
  $("#mainListDiv").toggleClass("show_list");
  $("#mainListDiv").fadeIn();

});

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('.nav').addClass('affix');
    console.log("OK");
  } else {
    $('.nav').removeClass('affix');
  }
});
.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  line-height: 65px;
  text-align: center;
  z-index: 1;
}

.nav div.logo {
  float: left;
  width: auto;
  height: auto;
  padding-left: 0.9rem;
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
}

.nav div.logo a:hover {
  color: #00E676;
}

.nav div.main_list {
  height: 65px;
  float: right;
}

.nav div.main_list ul {
  width: 100%;
  height: 65px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav div.main_list ul li {
  width: auto;
  height: 65px;
  padding: 2px;
  padding-right: 0.9rem;
}

.nav div.main_list ul li a {
  text-decoration: none;
  color: #fff;
  line-height: 65px;
  font-size: 80%;
  font-weight: bold;
}

.nav div.main_list ul li a:hover {
  color: #00b3ee;
}


/* Home section */

.home {
  width: 100%;
  height: 100vh;
  background-position: center top;
  background-size: cover;
}

.navTrigger {
  display: none;
}

.nav {
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 1;
}

/* Media query section */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .navTrigger {
    display: block;
  }
  .nav div.logo {
    margin-left: 15px;
  }
  .nav div.main_list {
    width: 100%;
    height: 0;
    overflow: hidden;
  }
  .nav div.show_list {
    height: auto;
    display: none;
  }
  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #111;
    
    background-position: center top;
  }
  .nav div.main_list ul li {
    width: 100%;
    text-align: right;
  }
  .nav div.main_list ul li a {
    text-align: center;
    width: 100%;
    font-size: 3rem;
    padding: 20px;
  }
  .nav div.media_button {
    display: block;
  }
}

.navTrigger {
  cursor: pointer;
  width: 30px;
  height: 25px;
  margin: auto;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
}

.navTrigger i {
  background-color: #fff;
  border-radius: 2px;
  content: '';
  display: block;
  width: 100%;
  height: 4px;
}

.navTrigger i:nth-child(1) {
  -webkit-animation: outT 0.8s backwards;
  animation: outT 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
  margin: 5px 0;
  -webkit-animation: outM 0.8s backwards;
  animation: outM 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
  -webkit-animation: outBtm 0.8s backwards;
  animation: outBtm 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
  -webkit-animation: inT 0.8s forwards;
  animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
  -webkit-animation: inM 0.8s forwards;
  animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
  -webkit-animation: inBtm 0.8s forwards;
  animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}

@keyframes inM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@-webkit-keyframes outM {
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}

@keyframes outM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@-webkit-keyframes inT {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(9px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(9px) rotate(135deg);
  }
}

@keyframes inT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(0deg);
  }
  100% {
    transform: translateY(9px) rotate(135deg);
  }
}

@-webkit-keyframes outT {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(9px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(9px) rotate(135deg);
  }
}

@keyframes outT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(0deg);
  }
  100% {
    transform: translateY(9px) rotate(135deg);
  }
}

@-webkit-keyframes inBtm {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-9px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-9px) rotate(135deg);
  }
}

@keyframes inBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(0deg);
  }
  100% {
    transform: translateY(-9px) rotate(135deg);
  }
}

@-webkit-keyframes outBtm {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-9px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-9px) rotate(135deg);
  }
}

@keyframes outBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(0deg);
  }
  100% {
    transform: translateY(-9px) rotate(135deg);
  }
}

.affix {
  padding: 0;
  background-color: #111;
}

.myH2 {
  text-align: center;
  font-size: 4rem;
}

.myP {
  text-align: justify;
  padding-left: 15%;
  padding-right: 15%;
  font-size: 20px;
}

@media all and (max-width:700px) {
  .myP {
    padding: 2%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
  <div class="container">
    <div class="logo">
      <a href="#"><img src="img" class="ha"></a>
    </div>
    <div id="mainListDiv" class="main_list">
      <ul class="navlinks second">
        <li class="a"><a href="#">HOME</a></li>
        <li class="b"><a href="#">ABOUT US</a></li>
        <li class="c"><a href="#heading-three">OUR SERVICES</a></li>
        <li class="d"><a href="#">JOBS</a></li>
        <li class="e"><a href="#heading-two">CONTACT US</a></li>
      </ul>
    </div>
    <span class="navTrigger">
                <i></i>
                <i></i>
                <i></i>
        </span>
  </div>
</nav>


<nav class="nav">
  <div class="container">
    <div class="logo">
      <a href="#"><img src="chk2.png" class="hello"></a>
    </div>
    <div id="mainListDiv" class="main_list">
      <ul class="navlinks second">
        <li class="a"><a href="#">HOME</a></li>
        <li class="b"><a href="#">ABOUT US</a></li>
        <li class="c"><a href="#heading-three">OUR SERVICES</a></li>
        <li class="d"><a href="index7.html">JOBS AT HEGTAVIC</a></li>
        <li class="e"><a href="#heading-two">CONTACT US</a></li>
      </ul>
    </div>
    <span class="navTrigger">
                    <i></i>
                    <i></i>
                    <i></i>
            </span>
  </div>
</nav>

javascriptjqueryhtmlcss

Answer №1

After testing your code and making some tweaks, I found that it is now functioning perfectly.

$(document).ready(function(){
  $('.navTrigger').on('click',function (){
    $(this).toggleClass('active');
    console.log("Clicked menu");
    $("#mainListDiv").toggleClass("show_list");
    $("#mainListDiv").fadeIn();

  });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve distinct items from an array using Javascript

If I have the following array of objects: const arr = [{ id: 'A', version: 0, name: 'first' }, { id: 'A', version: 1, name: 'first' }, { id: 'B', version: 0, name: 'second&apo ...

javascriptarraysecmascript-6

What are some ways I can integrate my Json object into my IONIC app rather than relying on a hardcoded object?

I stumbled upon this IONIC app's services.js file and found an example using a hardcoded object called "employees." Instead of using the hardcoded object, I wanted to use a JSON file. However, my attempt to make this change did not work as expected. I ...

javascriptangularjsjsonionic-frameworkmobile

Error: react/js encountered an unexpected token

While attempting to execute my project, I encountered an error in the console related to a function within the code. The exact error message reads as follows: "63:25 error Parsing error: Unexpected token, expected (function toggleDrawer = (open) => () ...

javascriptreactjsmaterial-ui

What is the best method for extracting information from this data? (extracting data from

I need assistance. I've written multiple arrays to a text file and now I'm trying to parse them. What am I doing incorrectly? fs.readFile("./data.txt", "utf8", function(error,dataRes){ console.log('Reading data') ...

javascriptnode.jsjson

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Here is the HTML code to consider. The term 'response' was modified to 'reason', by removing 'sp' (<del> tag) and adding 'as' (<ins> tag), while also removing 'se' (<del> tag). <div &g ...

javascriptc#jqueryhtmlhtml-agility-pack

footer extending beyond the previous div's boundaries

Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a foote ...

htmlcssbootstrap-4

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

htmlcssfontsicons

CSS3 animations and transitions offer dynamic and engaging effects for websites

Could CSS3 animations be utilized for scrolling a window? In jQuery, you would typically use something like: $(window).animate({scrollTop: '+=200'}, 300, function() { }); Therefore, my inquiry is whether it is feasible to achieve a similar effe ...

jquerycssscroll

Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over. To achieve this, I added a simple popover component to the last cell of ...

htmlcssreactjshtml-tablematerial-ui

Guide on importing a Blender scene into three.js with textures, lighting, and camera

I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...

javascriptthree.jsblender

Why is it that only one of these .php functions is functional?

I'm having some trouble getting my PHP results to display in an HTML table. The first part of my code successfully retrieves the data I need, so I believe the issue lies in the second section where I attempt to format it into a table. Below is the sni ...

phphtml

Issue: Angular JS radio input not functioning as expected

Below is the code snippet in question: <div ng-controller="TestController"> <input ng-repeat="item in array" ng-model="selected.name" value="{{item.name}}" type="radio"></input> </div> <script type="text/javascript"> ...

javascriptangularjscheckboxradio-button

Invoking a parent controller method from a directive in AngularJS

I have utilized a tree grid plugin from the following link: https://github.com/khan4019/tree-grid-directive and I made some customizations to its template: .directive('treeGrid', [ '$timeout', function($timeout) { return { ...

javascriptangularjsangularjs-directive

Is there a way to make all DIVs in the same class have the same height as the tallest div?

I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div Thank you in advance. ...

htmlcss

Have you ever encountered the orientationchange event in JavaScript before?

When does the orientationchange event trigger in relation to window rotation completion? Is there a way to fire an event before the operating system initiates the integrated window rotation? Edit: For example, can elements be faded out before the rotation ...

javascriptandroidiosmobilerotation

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

I’m encountering an issue with my code. I must emphasize that I’m brand new to this, so please bear with me if the solution is simple. I did attempt to solve it myself before reaching out for help and searched through various posts with similar errors, ...

javascripthtmlajaxjson

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

htmlcssmedia-queries

The code within the then() promise resolver function will always execute, regardless of whether the promise succeeds or

After clicking a button, I trigger a vuex action which returns an axios promise from the store. In my component, I only want to reset form fields when the action is successful. However, currently the form fields are always reset, even if the promise fails. ...

javascriptvue.js

What is the best way to trigger a jQuery function once a form has been successfully submitted?

Is there a way to execute a jQuery function AFTER a form has been submitted? I am familiar with calling a function ON submit, but I specifically need it to run after the form data has been posted and stored in the database using PHP. In my website projec ...

phphtmljqueryforms