Dynamically Adjust Div Margin-Top Based on Size of Fixed Navigation

July 25, 2018

Single fixed navigation solution:

jQuery('#main').css("margin-top", function() { return jQuery('#nav').outerHeight() });

Multiple fixed navigation bars:

var outerHeight = 0;
jQuery('#nav').each(function() {
	outerHeight += jQuery(this).outerHeight();
});
//jQuery("#total-height").text(outerHeight + 'px');

jQuery('#main').css("margin-top", function() { return outerHeight + 50 });

Reference for multiple fixed navigation.

Used to dynamically resize divs in sequence to all be the same height (on load, and on window resize):

jQuery('.container').css("min-height", function() { return jQuery('.container').width() * 2 } );
   jQuery(window).resize(function(){
       jQuery('.container').css("min-height", function() { return jQuery('.container').width() * 2 } );
   });

This comes in handy when loading inline background images on divs.