Streaming live at 10am (PST)

Stylizing Nav Bar for Individual Collection Pages


#1

Is it possible to maintain the stylizing of a Nav Bar link for pages under the corresponding Collection? Example: Nav Bar collections are “Metal Widgets” and “Wood Widgets.” On those Collection landing pages, the Nav Bar item is stylized accordingly. Then, when I click on a page under those Collections, I want “Metal Widget” or “Wood Widget” to remain stylized in the Nav Bar. Is that possible?

Newbie here, so apologies for the likely inaccurate terminology…


#2

Hi there,

Thank you so much for reaching out about create a style for the current state of a link on a different page.

Great question, and I hope I can help.

I would suggest creating a nav specifically for that collection, and then add an ID to each template that you can reference in that navigation.

Would you happen to be able to share the Read-Only link?

I would be happy to take a look to provide a solution.


#3

Is it possible to share the read-only link directly with you?


#4

Sure.

To enable the read-only link of your project, go to your project settings and click the share button in the top toolbar. Then, switch the read-only link “On.”


#5

Right, but is it possible to not make it public? i.e. just send the link directly to you, Micah?


#6

Yes, you can send it to me as a direction message as well by clicking in the forum on my name, or avatar, and selecting “Message”


#7

So you have items that are either in the metal or wood category, and you want the navbar for each item to reflect that?

You can use the CMS to style them depending on the collection. For example, add bg image and or color field to the categroy collection, then define wood image and tones for the wood category, and metal texture or tones to the metal one. Now you’ll style your navbar, link items or links using those fields. Explore the settings tab when you’re styling an element, you can call an image, a bg image or a color from the cms.