Navigation Links on Category Page

Hello,
I created a custom set of navigational links for a Categories Template page because the category has 6 pages of content. This simple row of numbered navigation is available at the top and bottom of the page. I would like to have a visual indicator to show visitors which page is the current page. For example, when someone is on page 3, the number three could have an outline around it or change color. Or perhaps the text could state that the page is “Bostonscapes Page 3”. Under the states menu there is no option provided for “Current Page”. I can create a state change for “visited” but this doesn’t help to indicate current page. The links were created using the specific URL address for each sequential category page.

How might I accomplish this ?

Kind regards,
Sara

Attached are some screenshots:

Published page URL : https://saras-fresh-project-29b7f0.webflow.io/category/prints-of-boston

Read Only Link : https://preview.webflow.com/preview/saras-fresh-project-29b7f0?utm_medium=preview_link&utm_source=designer&utm_content=saras-fresh-project-29b7f0&preview=fe3ebf1fe45ff37c9b9a87a8573ca881&pageId=5d865bce4a655769b950eb8a&itemId=5d865bce4a6557530150ebaf&mode=preview

1 Like

Hey Sara!
Great solution!
Would you be kind to edit your post and move the ‘update’ section to a seperate reply right here? This way we can mark your reply as a solution, so it is easier for other forum members to understand :smiley:

1 Like

Thanks @avivtech

I was able to resolve this issue on my own by working with a collection list, creating 6 separate categories and filtering with a switch to create the type of navigation needed. Created 6 separate category pages with 14 items each for Bostonscapes artwork( rather than cramming 76 products) into one category. A collection list was made and then filtered using a switch to only feature 6 Bostonscapes pages that had the switch turned on. The highlight for the current page shows up now the way I wanted because of working with collection list names and links. Also, in order for the “current” state to show up, make sure that you are actually on the matching page for the button/link you are editing. For example, in order to create a current state for the page 1 button, you have to be working with page 1 in webflow.

1 Like