title: @media remove top:0; from style
body: <p>So I've been wasting a ton of time on this little thing. Hoping someone around here can help me out.</p>
  
  <p>I have a right side navigation panel.</p>
  
  <pre><code>.navbar_right{
   width: 365px;
   top:0;
   height:100%;
   position:fixed;
   right:0;
  }
  </code></pre>
  
  <p>Now when my website breaks at the width of 1400, I want that same menu placed to the right, but at the bottom instead of the top.
  So how do I go about removing <code>top:0;</code> and adding <code>bottom:0;</code> instead.</p>
  
  <pre><code>@media (max-width: 1400px) {
   .navbar_right{
   bottom:0;
   height:40%;
   }
  }
  </code></pre>
  
  <p>I would prefer to be able to use the same container, as the platform I'm working on will be pushing content into the navigation panel, so if I can achieve this small thing - I'll save a lot of resources. Also I'd prefer to avoid jQuery for the same reason. Is it possible to stick with this one box, maybe delete a class and add another one?</p>