title: Navigation submenu push from top
body: <p>So, i have a simple on-click (instead of hover) "megamenu" which looks like this:
  <a href="https://i.stack.imgur.com/kYOy7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYOy7.png" alt="enter image description here"></a></p>
  
  <p>Once user clicks on the link, it is displayed under the menu overlaying anything that is bellow it.</p>
  
  <p>But, instead of this, i would need this submenu (blue area) to be shown above the navigation bar (aka, pushing the nav bar and content bellow once opened) so it appears from top.</p>
  
  <p>I have tried playing with absolute positioning, using several offset plugins... and nothing, i am completely stuck (JS newbie).</p>
  
  <p>I was wondering could anybody help (i know i am asking a lot)...
  This is the piece of code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="main"&gt;
      &lt;nav id="cbp-hrmenu" class="cbp-hrmenu"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Parent&lt;/a&gt;
            &lt;div class="cbp-hrsub"&gt;
              &lt;div class="cbp-hrsub-inner"&gt; 
                &lt;div&gt;
                  &lt;h4&gt;Submenu&lt;/h4&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /cbp-hrsub-inner --&gt;
            &lt;/div&gt;&lt;!-- /cbp-hrsub --&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Parent 2&lt;/a&gt;
            &lt;div class="cbp-hrsub"&gt;
              &lt;div class="cbp-hrsub-inner"&gt; 
                &lt;div&gt;
                  &lt;h4&gt;Submenu 2&lt;/h4&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /cbp-hrsub-inner --&gt;
            &lt;/div&gt;&lt;!-- /cbp-hrsub --&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Parent 3&lt;/a&gt;
            &lt;div class="cbp-hrsub"&gt;
              &lt;div class="cbp-hrsub-inner"&gt; 
                &lt;div&gt;
                  &lt;h4&gt;Submenu 3&lt;/h4&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /cbp-hrsub-inner --&gt;
            &lt;/div&gt;&lt;!-- /cbp-hrsub --&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Parent 4&lt;/a&gt;
            &lt;div class="cbp-hrsub"&gt;
              &lt;div class="cbp-hrsub-inner"&gt; 
                &lt;div&gt;
                  &lt;h4&gt;Submenu 4&lt;/h4&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /cbp-hrsub-inner --&gt;
            &lt;/div&gt;&lt;!-- /cbp-hrsub --&gt;
          &lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="display:block; height:500px"&gt;Lorem Ipsum&lt;/div&gt;
  </code></pre>
  
  <p>Fiddle is at <a href="https://jsfiddle.net/dca1eLqq/" rel="nofollow noreferrer">https://jsfiddle.net/dca1eLqq/</a>
  P.S Sorry for my potentially bad english</p>
  
  <p>P.P.S Due to my bad english, i havent explained it properly, so here is a quick mockup on how it should look
  <a href="https://i.imgur.com/enDhe5S.png" rel="nofollow noreferrer">http://i.imgur.com/enDhe5S.png</a></p>