CODEWITHSUNDEEP
jquerycssresponsive-design
WebDevoted
WebDevoted

Reputation: 11

jQuery toggleClass() something not right

So I'm currently working on a responsive navigation menu. I've created them before but for some reason cannot get this one to work! maybe I'm looking over something, can anyone have a look and tell me what I'm overlooking? haha

If I make the following change:

.show {
   display: block; !important
}

I can achieve the drop down without it quickly hiding itself again, but have achieved it before without having to use !important.

JSFiddle

Upvotes: 1

Views: 61

Answers (1)

tohood87
tohood87

Reputation: 728

Avoid the media query overriding the drop down show class: - Working Demo

#nav-dropdown ul.show {
  display:block;
}

UPDATE:

This was the problem I could see.

@media screen and (max-width: 768px) {

  #nav-dropdown ul {
    display: none;
  }
}

Having "#nav-dropdown ul.show" CSS fixed the issue as ID's are unique and takes preference over classes.

Upvotes: 3

Related Questions