tags/navigation page (1, 2, and 3 styles)
important: colors and text shown in the preview match the type of theme applied there. so when you use, the colors, fonts and text size may look different if you’re using a different theme, but you can freely customize this in css too
the one used in the preview is my theme 219
another example, this one is my theme 208
copy the script on <!-- masonry navigation -->
search for </body> and place it before that tag. if you already have scripts there, place this one after all of them
next, there should be another <script> or <script type="text/javascript"> there too, if there is you’re gonna copy mine and paste above all of them
this is how it should look like. if you want, the second script can be like this, here i put them with all the other scripts i have
copy all the the code above
search for </style> that’s where it ends the style on your html, so you place before that tag
create a new page and select the type as standard layout. press the html and paste the code there
everything is in the html part. here on this ‘full version’ (the html code) i explain a bit more about the tags, but i left them as simple as possible. you only need a main div (masonry-navigation) and the item div (masonry-navigation-item + which columns you want) inside. then add the content inside the item. you can use any html related tags there, not only ul and li.
works for all posts sizes, but this one is configured to 540px posts. to change that and if the two and three columns look a bit off, search for .masonry-navigation-item.two-columns and .masonry-navigation-item.three-columns, and adjust their widths!
anything you need help with you can send me an ask or message and i’ll gladly help!
