Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Masonry and Bootstrap navigation problem

I am creating a photography website using Bootstrap and made a dynamic photo layout with Masonry, everything works fine in desktop mode, but on small devices navbar toggle doesn't work properly. When it collapses, the background of nav dropdowns disappears. How can I fix this?

If I remove Masonry, it works fine on any device, so I believe that a problem is with Masonry.

For Masonry I'm using this code:

$(document).ready(function(){ var $container = $('.container');

$container.imagesLoaded( function() { $container.masonry({ itemSelector : '.photo', columnWidth : '.photo', transitionDuration : 0 }); }); });

Thank you

3 Answers

Kevin Korte
Kevin Korte
28,135 Points

I'm not familiar enough with these two together to offer any other solution, but if you're using jQuery you could do something like this:

if( $(window).width() <= 767) {
   $container.imagesLoaded( function() { $container.masonry({ itemSelector : '.photo', columnWidth : '.photo', transitionDuration : 0 }); }); });
}

This way it won't initialize masonry when the screen is 767px or smaller, which I believe is the default point that bootstrap uses the mobile navigation.

Hope that solves it for you. I still wonder if there isn't a more elegant solution in there somewhere.

Also I thought of a solution, but don't know how to implement it, so if someone has an idea, please let me know.

My solution is quite simple - to remove Masonry in small devices as Bootstrap places them vertically which works for the size of photos I'm using.

The question is, how can I remove Masonry for small devices?

Hi Kevin,

Many thanks for your reply! I got it to work finally and if statement did work, however after a few days of trying I realised that I had one more mistake and it should be{ var $container = $('#masonry');

I also extensively research online and tried all other suggestions but they didn't work for me. I am very new to development so maybe I had bugs that didn't allow me to succeed even though I was on the right path. I believe it should also be possible to do with masonry destroy function.