Different navbar styling for different collection pages

Hi Webflow Pros,

I having trouble styling my navbar differently for different collection pages. All of my collection pages currently have an background image and on the pages which have dark background images, I want the navbar to be white. I have tried unlinking the navbar symbol and changing it that way, however the navbar on all collection pages are still linked.

My website preview link attached. If you scroll down to “Grand ridge Brewery” and click on the “view project” link, you can see that the navbar on that page is barely visible because the background image is too dark.

Is there any way to solve this?

https://preview.webflow.com/preview/haos-first-project-cc3213?utm_source=haos-first-project-cc3213&preview=85632f468c9c2a78b3d64a928a7a7856

Hi @HaoCreative,

Did you try adding a combo class before styling the second navbar?

Hi @donaldsv,

Just tried it and it doesn’t seem to work. The changes I make still apply to all other pages in the CMS collection pages.

As donaldsv said. Unlink symbol and add a combo class.

Are you trying to have a different navbar color for each pages INSIDE a single collection list? Or a different one for different collection lists?

Yes, i am trying to have a different navbar font color for each pages inside a single collection list.

Hi, this response is few years late but may be helpful to some people. A solution to this is to specify navbar text color and/ or background color when creating your collection items.

Then with the navbar selected, go to its settings and enable the dynamic style setting you want, see image below.
Screenshot 2022-10-04 at 15.41.08

That should work and allow you to have the text colours you want for contrast.