title: Semantic-UI Transistioning from mobile to tablet displays with the sidebar open
body: <p>This is my html where I have a <code>pointing menu</code> when the screen width is over <code>630px</code> and a sidebar with a menu button when the screen width is less than <code>630px</code>:</p>
  <pre><code>&lt;nav class=&quot;ui inverted sidebar menu vertical slide out&quot; id=&quot;m_menu&quot;&gt;
  &lt;a href=&quot;index.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;home icon&quot;&gt;&lt;/i&gt;Home
    &lt;/a&gt;
  
    &lt;a href=&quot;about.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;user icon&quot;&gt;&lt;/i&gt;User
    &lt;/a&gt;
  
    &lt;a href=&quot;portfolio.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;archive icon&quot;&gt;&lt;/i&gt; Portfolio
    &lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div id=&quot;menuDiv&quot;&gt;
    &lt;nav class=&quot;ui inverted fluid four item pointing menu&quot; id=&quot;menu&quot;&gt;
  
      &lt;a href=&quot;index.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;home icon&quot;&gt;&lt;/i&gt;Home
      &lt;/a&gt;
  
      &lt;a href=&quot;about.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;user icon&quot;&gt;&lt;/i&gt;User
      &lt;/a&gt;
  
      &lt;a href=&quot;portfolio.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;archive icon&quot;&gt;&lt;/i&gt; Portfolio
      &lt;/a&gt;
  
      &lt;a href=&quot;contact.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;message icon&quot;&gt;&lt;/i&gt; Contact
      &lt;/a&gt;
  
    &lt;/nav&gt;
  
    &lt;div class=&quot;ui labeled icon button black&quot; id=&quot;m_btn&quot;&gt;
      &lt;i class=&quot;icon list layout&quot;&gt;&lt;/i&gt; Menu
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;img src=&quot;http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg&quot; alt=&quot;Table With Chairs&quot;&gt;
  </code></pre>
  <p>This is my css:</p>
  <pre><code>  body{
   margin:0;
    padding:0;
    font-family:&quot;helvetica&quot;,arial;
  }
  
  #menuDiv{
    margin:40px 40px 0 40px;
    text-align:center;
  }
  
  #menu:{
    max-width:1024px;
    margin:0 auto;
  }
  
  #m_btn{display:none;}
  
  img{
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    z-index:-1;
  }
  
  @media all and (max-width:630px)
  {
    #menu{display:none;}
    #m_btn{
      display:inline-block;
    }
  }
  
  /*fails to fix sidebar sidebar showing @width&gt;=631px*/
  @media all and (min-width:631px)
  {
      /*suggested on tutsplus,no change on applying*/
      body.pushable{margin-left:0 !important;}
      #m_menu.visible{
        display:none;  
      }
  }
  </code></pre>
  <p>When I resize the screen to 630px or lower,the horizontal navigation bar menu disappears and a button appears in the center of the page.A link to the screenshot is <a href="https://www.dropbox.com/s/s2zw0tzdhoczp4a/Screenshot%202014-12-15%2006.23.51.png?dl=0" rel="noreferrer">here</a></p>
  <p>I open the sidebar and resize the screen to a width greater than 630px where it removes the menu items in the sidebar but not the sidebar itself.There is a screenshot <a href="https://www.dropbox.com/s/jr96c2nzvaqeejg/Screenshot%202014-12-15%2006.28.09.png?dl=0" rel="noreferrer">here</a></p>
  <p>How can I ensure that the sidebar disappears even if open at resolutions over 630px?</p>
  <h1>EDIT:</h1>
  <p>When the sidebar is open semantic ui wraps everything else into a <code>pusher</code> class and adds a <code>pushable</code> class to the <code>body</code>,it uses class <code>visible</code> to provide you with information about what the sidebar is doing,this is the reason for trying</p>
  <pre><code>   @media all and (min-width:631px)
    {
      /*suggested on tutsplus,no change on applying*/
      body.pushable{margin-left:0 !important;}
      #m_menu.visible{
        display:none;  
      }
    }
     
  </code></pre>
  <p>This is what the <code>DOM</code> looks like with the sidebar visible:</p>
  <pre><code>  &lt;body class=&quot;pushable&quot;&gt;
       &lt;nav class=&quot;ui inverted sidebar menu vertical slide out uncover left animating visible&quot; id=&quot;m_menu&quot;&gt;
    &lt;a href=&quot;index.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;home icon&quot;&gt;&lt;/i&gt;Home
    &lt;/a&gt;
  
    &lt;a href=&quot;about.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;user icon&quot;&gt;&lt;/i&gt;User
    &lt;/a&gt;
  
    &lt;a href=&quot;portfolio.php&quot; class=&quot;item&quot;&gt;
      &lt;i class=&quot;archive icon&quot;&gt;&lt;/i&gt; Portfolio
    &lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div class=&quot;pusher dimmed&quot;&gt;&lt;div id=&quot;menuDiv&quot;&gt;
    &lt;nav class=&quot;ui inverted fluid four item pointing menu&quot; id=&quot;menu&quot;&gt;
  
      &lt;a href=&quot;index.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;home icon&quot;&gt;&lt;/i&gt;Home
      &lt;/a&gt;
  
      &lt;a href=&quot;about.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;user icon&quot;&gt;&lt;/i&gt;User
      &lt;/a&gt;
  
      &lt;a href=&quot;portfolio.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;archive icon&quot;&gt;&lt;/i&gt; Portfolio
      &lt;/a&gt;
  
      &lt;a href=&quot;contact.php&quot; class=&quot;item&quot;&gt;
        &lt;i class=&quot;message icon&quot;&gt;&lt;/i&gt; Contact
      &lt;/a&gt;
  
    &lt;/nav&gt;
  
    &lt;div class=&quot;ui labeled icon button black&quot; id=&quot;m_btn&quot;&gt;
      &lt;i class=&quot;icon list layout&quot;&gt;&lt;/i&gt; Menu
    &lt;/div&gt;
  &lt;/div&gt;&lt;img src=&quot;http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg&quot; alt=&quot;Table With Chairs&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Here is a <a href="http://jsfiddle.net/p9hp9Lg9/4/" rel="noreferrer">jsfiddle</a> and a <a href="http://runnable.com/VI4c47A_QZhnGQXw/semantic-ui-php" rel="noreferrer">runnable</a></p>