My navbar disappears when I use jQuery code

Question

I think I have a jQuery problem.

So when I'm using the PC version of my website and I click in navbar items (which is #menu-two .items in my HTML code), the navbar menu disappears.

I have some media queries to readjust the navbar menu and in this media queries I want the navbar (which is .hide) to hide when I click on the navbar items, in this case tablet and mobile version.

It seems that the computer version cannot be separated from these two versions in this case and hides the #menu-two too.

 
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('hide')
$('.hide').fadeToggle()
}) 

$('.active').on('click', function() {
    $('.toggle').fadeToggle()
})

$('.item').on('click', function() {
      $('.hide').fadeToggle()
})

.toggle {
  display: none;
}

a {
  text-decoration: none;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 1px;
  font-size: 20px;
  color: black
}

#menu-two {
  display: flex;
}

.hide {
  display: none;
}

li {
  list-style: none;
  padding: 1em
}

@media only screen and (max-width: 1210px) {
  #menu-two {
    display: none;
  }
  .hide {
    background-color: rgb(253, 236, 214);
    opacity: 0.95;
    position: absolute;
    width: 100%;
    top: 4rem;
    text-align: center;
  }
  .options {
    display: block;
  }
  .menu-one {
    display: flex;
    justify-content: space-between;
    width: 100%
  }
  .toggle {
    display: initial;
    padding-top: 1.5rem;
    transform: translate(-10px);
    cursor: pointer;
  }
  .toggle span {
    position: relative;
    width: 36px;
    height: 4px;
    display: block;
    background-color: black;
    margin-bottom: 8px;
    transition: 0.5s;
  }
  .toggle span:nth-child(1) {
    transform-origin: left;
  }
  .toggle span:nth-child(2) {
    transform-origin: center;
  }
  .toggle span:nth-child(3) {
    transform-origin: left;
  }
  .toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    left: 2px;
  }
  .toggle.active span:nth-child(2) {
    transform: rotate(315deg);
    right: 3px;
  }
  .toggle.active span:nth-child(3) {
    transform: scaleX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-one">
  <div class="toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<ul id="menu-two" class="hide">
  <li class="item">
    <a href="./prototype.html">Home</a>
  </li>
  <li class="item" id="proj">
    <a href="./exp.html">Projects</a>
  </li>
  <li class="options">
    <a href="./Atower.html">A-Tower</a>
  </li>
  <li class="options">
    <a href="./muda.html">Muda</a>
  </li>
  <li class="item">
    <a href="#About-Me">About</a>
  </li>
  <li class="item">
    <a href="#Contact">Contact</a>
  </li>
</ul>

The problem is when I use this jQuery code, it is acting not only in my media queries, but outside of it too, so my navbar is hidden in PC version even though a I had a display: none in .hide class.

What should I do?

could you provide a [JSFiddle](https://jsfiddle.net/)? – glend Sep 02 '19 at 13:13 — glend, Sep 02 '19 at 13:13

Oliver · Accepted Answer · 2019-09-02T13:19:09.467

1

Using jQuery's fadeToggle adds styles inline to an element, which takes precedence over stylesheet styles. That's why your media queries are being ignored. If you want to fade out only within certain media queries, you can instead toggle a class and add the relevant styles to that class. For example:

JS

$('.item').on('click', function() {
    $('.hide').toggleClass('hidden');
    ...

CSS

@media only screen and (max-width: 1210px) {
  .hide {
    transition: opacity 0.2s;
  }

  .hide.hidden {
    opacity: 0;
    pointer-events: none;
  }
}

If you need to have the element set to display: none (for example, so that it doesn't push other elements down) you can have a setTimeout in your jQuery code in order to set the element to be hidden after an animation has been completed, or displayed before an animation starts again.

edited Sep 02 '19 at 13:19

answered Sep 02 '19 at 13:13

Oliver

2,930
1
20
24

Hi Oliver! How can I display .hide and .toggle again after this event? because after this event I tried to click on my icon menu that is now an X and nothing happens because .hidden is blocking it correct? – Pedro Cris Sep 02 '19 at 15:52
I have made a fiddle - does this do what you want? https://jsfiddle.net/emqpvafk/ Basically, I have remove the jQuery showing/hiding the list, and instead adds/removes a class that makes the list visible or not – Oliver Sep 02 '19 at 16:23
My primary code does what I want for my media queries, the problem is when width is bigger than 1210px, I click on items and then they simply disappear. – Pedro Cris Sep 02 '19 at 17:28
OK, I see that now. You have a `fadeToggle` call on the links when they are clicked. I have removed that now here: https://jsfiddle.net/8kcx7ft6/ - does that solve your issue? – Oliver Sep 03 '19 at 08:11

My navbar disappears when I use jQuery code

1 Answers1