When filtering blog posts by category, how can I make the filtered results clearer?

Hi, I recently added this header section (in light blue) to a blog page so that users can filter blog posts by category using the filters (which I have setup using an Archive block). When it brings up the filtered results the header remains the same and I'm keen to change the header somehow to show the category that's been selected. Is there a way to do this somehow please? 

I'd ideally like the selected category to change the dark blue background with white text (like the 'Filter by' text), but open to any other suggestions.

TIA! 

Yes use summary blocks in their own blog separated by category which is the title of the post. Like mine here: Blog posts by category/subject with menu

Hi Derrick,

Would you mind elaborating on the setup of your blog and specifically how you have used the summary blocks with the archive block to sort your posts into categories? Or maybe that's not what you did, but I like how you've arranged your blog navigation and would like to know more. Thanks so much!

I use two blog pages. Blog Number One is where all my posts are, and they each have a group category or categories,  depending on the number of items I want on a page, more than 30 require more than one category. For example: I might give Soul Stories to the first 30 items and Soul Stories 2 to the next 30. This is my main blog page and goes into the unlinked section of my site. All my blog posts reside there. 

The second blog page is in the main section of my site and contains only summary blocks in the posts. There can be multiple summary blocks in each post and they are filtered using the categories as mentioned above to pull content. Each post in the second blog (remember this is my front-facing blog page) has a category and the archive block pulls content from the second blog page, and the subject in the menu matches the category that I gave the post with the blocks containing those posts from blog number one. So the steps are as follows:

Create a Second blog page 

Give all your posts in blog number 1 a category grouped by subject. If that subject has more than 30 posts then give the ones above 30 an xxx 2 category. 

Create posts in blog number 2 with a post for each subject. In that post put summary blocks pulling content from blog number one filtered by the categories you gave those posts in blog number 1. Remember if over 30 items you will need more than one block per 30 and you will use two categories xxx 2 etc, 

Give the posts in blog number 2 the category that will appear word for word in your archive block. 

Create the archive block pulling content from blog number 2 grouped by category. I use the drop-down layout. 

Put blog number 1 in the unlinked section of your site,

Put blog number 2 in the linked section and give it the nav title you wish to show up on the menu bar. 

Also, you can create a post in the second blog for featured posts from blog 1. I put this at the top of the page.  You create a block pulling content from blog 1 and do not filter by category, filter by featured posts and then when you toggle that option in a post from blog 1 it will show up in this post. It is a good way to get your newest post to be at the top and also a way to feature an older blog that you think deserves some new attention. 

The blogs cannot share the same nav name, page name, or URL slug. 

If you have any questions, don't hesitate to come back here and ask me. 

Derrick

Wow, that is mind-bending and such a creative way to work with different features! I am going to play around with this. Thank you so much for your super detailed reply!

@CarinaSpencer Using an achieve drop down instead of the buttons (which look great!) would be the easiest solution. You could also have the category display below the blogs, though that may not be have the desired look your going for. 

An alternative would be to have your header with the buttons and all the blogs below. When they click on a button, it actually takes them to a new page where there can be an added header for that category. All the buttons would be the same (just duplicate that for each) and you can use a summary block to pull all of those blogs from that category. If you need to display more than 30 blogs, you can use: https://www.squarewebsites.org/squarespace-plugins/p/lazy-summaries

Someone else may have a more elegant solution 😊