Masonry and Bootstrap navigation problem

Question

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

Kevin Korte · Answer

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: 
js
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.

Migle Varnagire · Answer

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.

Migle Varnagire · Answer

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?

Welcome to the Treehouse Community

Looking to learn something new?

Migle Varnagire

Migle Varnagire

Masonry and Bootstrap navigation problem

3 Answers

Kevin Korte

Kevin Korte

Migle Varnagire

Migle Varnagire

Migle Varnagire

Migle Varnagire