title: positioning nav bar at the bottom of the viewport which also always remains at the bottom of the div
body: <p>There are 3 divs, 1st div has a logo and 2nd one has slider in it and 3rd div is navigation, I want my navigation div to be fixed at the bottom of the viewport which becomes sticky when it reaches the top. I achieve this with this code.</p>
  
  <pre><code>nav{
  position:absolute;
  width:100%;
  height: 56px;
  background-color:#ffffff;
  bottom:0px;
  display:block;
  border-bottom: 1px solid #ededed;
  background: #FFF;
  font-family: 'Cinzel', serif;
  font-weight:600;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 2px;
  }
  </code></pre>
  
  <p>The code runs well, but when the browser is resized, the navigation which is positioned at the bottom breaks the layout as it comes over slider, I want that when the browser is resized the height of div above nav adapts the height of viewport, the working example of effect i want to create is <a href="http://jeanstories.com/" rel="nofollow">here</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#topbar{
  display:block;
  position: fixed;
  width:100%;
  height: 30px;
  color:#fff;
  background-color:#073860;
  top:0px;
  display:block;
  }
  #head{
  background-color:#ededed;
  height:500px;
  }
  
  #logo{
  font-family: 'lainiedayshregular';
  display: block;
  height:134px;
  text-align: center;
  margin: 29px 0px 0px;
  padding: 20px 20px 5px;
  font-size:3em;
  }
  #logo a{
  position:relative;
  height: 109px;
  width: 377px;
  text-decoration:none;
  color:#073860;
  font-size:2em;
  }
  
  nav{
  position:absolute;
  width:100%;
  height: 56px;
  background-color:#ffffff;
  bottom:0px;
  display:block;
  border-bottom: 1px solid #ededed;
  background: #FFF;
  font-family: 'Cinzel', serif;
  font-weight:600;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 2px;
  }
  
  nav ul li {
  display:inline;
  text-decoration:none;
  }
  
  nav ul li a{
  text-decoration:none;
  text-transform: uppercase;
  color:#073860;
  outline: 0px none;
  }
  .menu{
  left: 0px;
  width: 100%;
  height: 56px;
  position:sticky;
  top:30px;
  }
  .navbarlogo{
  font-family: 'lainiedayshregular';
  color:#073860;
  }
  #test{
  height:1000px;
  background-color: #fafbf9;
  }
  #footer{
  border-top: 1px solid #EDEDED;
  background-color: #FFF;
  height: 37px;
  z-index: 3;
  bottom: -35px;
  transition: bottom 0.6s ease-in-out 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    
    &lt;!--CSS Links--&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;&lt;!--Custom stylesheet--&gt; 
    &lt;title&gt;Title here&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="topbar"&gt; &lt;/div&gt;
    &lt;div id="logo"&gt;&lt;a href="#"&gt;
    LOGO
    &lt;/a&gt; &lt;/div&gt;
    &lt;div id="head" class="row"&gt;
     
    &lt;/div&gt;
    &lt;nav class="menu"&gt;
    
    &lt;/nav&gt;
    
    &lt;div id="test" class="row"&gt;&lt;/div&gt;
    &lt;footer id="footer" style='display:none; position:fixed; bottom:0px; left:0px; width:100%;'&gt;footer test&lt;/footer&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>