Mob Nav Disappears After Window Resize

Question

When I toggle mobile menu up and down and then resize window, my web menu is gone, despite declared "display:block". What am I doing wrong?

CSS:

#nav {
    display: none;
}
#toggle {
    background-color: #FF9;
    width: 100%;
}
#toggle::after {
    content: "≡";
    float: right;
}
@media only screen and (min-width: 400px) {
#nav {
    display: block;
}
#toggle {
    display: none;  
}
#nav li {
    float: left;
}
}

JS:

$(document).ready(function(){
    $("#toggle").click(function(){
        $("#nav").slideToggle(500);
    });
});

HTML:

<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

I can't reproduce the issue. I start in a mobile-sized window and toggle the menu down, back up, and back down. Then I stretch the window wider and the menu remains. If I toggle the menu up before resizing the window, the menu is hidden as expected. Can you help to demonstrate the problem? — showdev, May 29 '15 at 20:05
Do you mean the opposite, that you slide the menu up (closed) and then resize the window? — showdev, May 29 '15 at 20:12

Carlos Mateo · Answer 1 · 2015-05-29T20:38:52.873

1

If i'm getting it right, i think this could help you: http://jsfiddle.net/7cL843hk/ All you need to do is to add !important to the #nav inside @media only screen and (min-width: 400px) :

#nav {
    display: block!important;
}

I think here you're having a css specificity issue.

This is because whenever you do a toggle with jQuery it prints style="display:block;" or style="display:none;" inlined in the html, and inlined styles have a higher specificity than ones in a external css file.

Hope it helped you.

edited May 29 '15 at 20:38

answered May 29 '15 at 20:26

Carlos Mateo

260
2
6

Reference: [Specificity @ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) – showdev May 29 '15 at 20:32
Exactly! thanks @showdev i was looking for a reference to add :D – Carlos Mateo May 29 '15 at 20:37
thank You Carlos, I looked into this, but ended up with showdev's suggestion. It seemed more browser-proof :) – reizer May 30 '15 at 21:04
no problem, whatever you feel works the best for you. Giving it a second thought, I think that's the best way too. :) – Carlos Mateo May 31 '15 at 21:22

score 1 · Accepted Answer · edited May 23 '17 at 12:22

As Carlos Mateo has already mentioned, your CSS does not have enough specificity to overcome the inline style added by jQuery.

jQuery hides the navigation by adding an inline style directly to the element; your CSS applies shows the navigation by using an ID selector. Referencing the CSS specificity chart below, note that inline styles have higher specificity than ID selectors (emphasis and bold added by me).

Selector Types

The following list of selector types is by increasing specificity:

Universal selectors (e.g., *)

Type selectors (e.g., h1)

Class selectors (e.g., .example)

Attributes selectors (e.g., [type="radio"])

Pseudo-classes (e.g., :hover)

ID selectors (e.g., #example)

Inline style (e.g., style="font-weight:bold")

Source: Specificity @ MDN

Carlos Mateo's solution is simple and works well. If it works in the context of your project, I highly recommend it. However, there are situations in which you may not want to use !important. It has its drawbacks, some of which are mentioned here. For this reason, I'm providing an alternate solution.

In my example below, I'm using the callback of jQuery's slideToggle() to remove the inline style and replace it with a CSS class after the slide is complete. This gives you the freedom to override CSS definitions without using !important.

NOTE: Use the "Full Page" button to test the action of the media query.

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#nav").slideToggle(500, function() {
      $(this).toggleClass('shown');  /* Toggle "display" class */
      $(this).removeAttr('style');   /* Remove style attribute */
    });
  });
});

#nav {
  display: none;
}
#nav.shown {
  display: block;
}
#toggle {
  background-color: #FF9;
  width: 100%;
}
#toggle::after {
  content: "≡";
  float: right;
}
@media only screen and (min-width: 500px) {
  #nav {
    display: block;
  }
  #toggle {
    display: none;
  }
  #nav li {
    float: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

thank You showdev. I ended up using pretty much what you've suggested: removing style attribute. I've read about !important, and it seemed more like a fix rather than proper dev method. — reizer, May 30 '15 at 20:59

Mob Nav Disappears After Window Resize

2 Answers2

Selector Types