the reason is that you “divided” your collection into 2 parts and limited them:
Filtering plugin is working with the content that already on the page and can’t know what more you have in your database.
You could use custom CSS for make first 2 items have a different width, but then it also will look weird if only 1 of them will be elected by some filter and other items in that filtered categories will have a smaller width.
That problem exists because this category has 2 words. The code snippet takes the text “Music Production”, “reads” only 1st word (until it meets the space character), lowercase it and create the classname for the item. So you get the class
.music. At the same time, current code that creates dynamic filtering menu doesn’t do that and you have different classname in the data-filter attribute
You will need to change a little bit the part of the code that creates dynamic filtering menu, so it will do the same.
// Adding data-filter attributes for filtering:
$('#dyn-filter-menu > div').each(
var catName = "." + $(this).children('a').text();
var select = catName.indexOf(' ') == -1 ? catName.length : catName.indexOf(' ');
var classCatName = catName.substr(0, select);
That will make all your filters work.