jQuery Pushing Content Below a Fixed header
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need the following code on window resize and at the mobile breakpoint size to push the content below an expanded fixed header.

$(function() {
    header_height = $(".fixed").height();
    $("main").css("padding-top", header_height);
});

On this code pen http://codepen.io/garyrozanc/full/sjpKb/ you can see that the script works when the browser window is bigger than the 768px breakpoint.

However, once the browser window is resized below the 768px breakpoint and the menu collapses the element following the header isn't pushed below the header properly. Also, when viewing from a mobile device the content is pushed down based on the size of the expanded menu even though it's collapsed.

I need a jQuery version, but I will also tip extra for an additional Javascript only version.

Would it be easier if you can fix the height for the header so that you can use CSS to pad the content downwards?
mcchin 5 years ago

Crowdsource coding tasks.

1 Solution


Check this: http://codepen.io/anon/pen/Kyupl.

I fixed it using only this css:

 @media screen and (max-width: 768px) {
     .row .col-7 { 
          position: absolute;     
          top: 0;
          background-color:transparent;
     }
 }
This didn't solve the problem in the way I wanted. When the menu opens I wanted the content of the rest of the page to be pushed down. Your solution makes the expanded menu overlap the rest of the page content. However, it's a temporary solution I didn't think of until someone can get it to work the way that I wanted so I gave you a tip.
imokyourok 5 years ago
Sorry, I misunderstood the problem, I updated the solution, try to check now: http://codepen.io/anon/pen/Kyupl
Stefano Balzarotti 5 years ago
Is it possible to animated the slide of the content below the menu? Right now it just jumps. Also, when the window is resized (from small to big) the the padding at the top of the content below menu is lost.
imokyourok 5 years ago
I've added animation, check it now.
Stefano Balzarotti 5 years ago
I just added extra text to the header area and the jQuery no longer calculates the new height and the content goes underneath the fixed header. http://codepen.io/garyrozanc/full/AwIEp/ I wanted this to expand and readjust automatically based on a variable sized height fixed header.
imokyourok 5 years ago