div is not responding to display:block;

Question

I have this set up where I'm switching the display to be responsive, I have two set of nav menus one is displayed and the other is hidden on page load, once the screen is 480px or below the main site nav menu acts as expected and is hidden, but the mobile nav wont show up.

here is my code below and thanks in advance.

@media screen and (max-width: 480px) {
  .mn-nav {
    display: block;
  }

  .main-site-nav {
    display: none;
  }
}

<div class="container">
  <div class="mn-nav" style="display:none;">
    <div class="col-md-12">
      <select width="100%" name="m-nav">
        <option value="select">Profile Menu</option>
        <option value="social">Social</option>
        <option value="profile">My Profile</option>
        <option value="media">My Media</option>
      </select>
    </div>
  </div>

  <div class="main-site-nav">
    <div class="col-md-3">
      <button id="social-button" style="width:100%;" class="btn btn-primary">Social</button>
    </div>

    <div class="col-md-3">
      <button id="profile-button" style="width:100%;" class="btn btn-primary">My Profile</button>
    </div>

    <div class="col-md-3">
      <button id="media-button" style="width:100%;" class="btn btn-primary">My Media</button>
    </div>

    <div class="col-md-3">
      <a href="/logout">
        <button style="width:100%;" class="btn btn-danger">Logout</button>
      </a>
    </div>
  </div>
</div>

Answer 1

The style is applied, but your inline display style takes precedence over the one in the style sheet, making it redundant. Remove the inline style and add it in the stylesheet before your media query:

HTML

<div class="mn-nav" style=""><!-- Inline style removed -->
  <div class="col-md-12">
    <select width="100%" name="m-nav">
      <option value="select">Profile Menu</option>
      <option value="social">Social</option>
      <option value="profile">My Profile</option>
      <option value="media">My Media</option>
    </select>
  </div>
</div>

CSS

.mn-nav{
    display: none;
}

@media  screen and (max-width:480px) {
    .mn-nav {
        display:block;
    }
    .main-site-nav {
        display:none;
    }
}

Bootply