Faux pas columns and masonry.js not working

Question

My portfolio website currently uses masonry.js to show the posts in a grid-like manner. Though i've recently come up on a bug that i can't seem to get rid of. If you go to my portfolio website at http://www.aerosphere.nl on a small resolution (resize browser or look at it with a tablet/phone), and somehow the masonry blocks move below the navigation menu.

I've tried adjusting the widths of the columns, even moving the sidebar to the right of the masonry blocks, all with no luck. Anyone care to look at the source code and/or know how to fix this?

Answer 1

The problem lied at the fact that i didn't use fixed positions for the nav menu and the masonry section of the site. MasonryJS uses fixed positions to get the whole effect, and when resizing it calculates screen size from the far left side of the screen since it doesn't have an x-coordinate assigned.

Since the nav bar is in the way to position the whole thing at x = 0 the whole section moves below the nav bar.