Question

Really banging my head with this.

I am using isotope http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html.

I have a #container set relative, in it I have a head with a top nav with hidden subnav, if i click on a link on the nav it expands the subnav. Fine.
I have a wrapper set to relative for the boxes, these boxes are set absolutely by isotope.

The issue is that when the subnav expands, it pushes the content down but the boxes are cut off. #container uses overflow:hidden and i can’t make it visible otherwise it creates other issues. I’ve tried so many solutions, just can’t figure it out.

Answer 1

I eventually took the #head off the #container and just set with jQuery the #head width and #head margins as the #container, even on window resize, by doing so i dont need to expand the #container when the sub nav reveals and it will just push the #container div as normal.

 $(function() {
   var myLeft = $("#container").offset().left;
   var newWidth = $("#container").innerWidth();
   var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth());
$("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
});

Thanks