Reply To: Masonry Layout
Hello Moira,
You have two options. Probably the more appropriate in your case is just hide the filters with CSS class d-none. For example:
<ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center d-none" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'masonry', 'filter': '*'}">
<li class="nav-item active" data-option-value="*"><a href="#">Show All</a></li>
<li class="nav-item" data-option-value=".websites"><a href="#">Websites</a></li>
<li class="nav-item" data-option-value=".logos"><a href="#">Logos</a></li>
<li class="nav-item" data-option-value=".brands"><a href="#">Brands</a></li>
<li class="nav-item" data-option-value=".medias"><a href="#">Medias</a></li>
</ul>
If you do not want these filters in your source code my suggestion for you is use the given code below:
<div class="masonry-loader masonry-loader-showing">
<div class="masonry" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/square/blog-11.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-2.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/square/blog-4.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-9.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-38.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-24.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-34.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-42.jpg" alt=" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads