Need help with styling active states in navigation

[adrianwolfson]

I want to be able to style my navigation the same on all pages on my website but when I use the CMS template/category pages on my site the navigation styles don’t work at al so then someone won’t know what category their are in since it’s not highlighted. I can’t see the hover or pressed bold text that i get on all other pages on my website.

I’ve uploaded a Music category page that is highlighted to show that you are looking at music videos. The next screenshot show that when you click on the video to watch it which is a page from my music CMS the navigation isn’t bold any more and this is the issue. No navigation styles are working in those pages.

Webflow have said it’s not be possible as the current active page is then not the category page.

Does anyone have a work around for this?

---

Here is my site Read-Only:

[https://preview.webflow.com/preview/adrianwolfson2021?utm_medium=preview_link&utm_source=dashboard&utm_content=adrianwolfson2021&preview=b65ff7399680dda8750d920f165891ea&workflow=preview ]

[dennyhartanto]

Hey @adrianwolfson, Webflow must be right that there is no built in function for this. Ofcourse theres a way with custom code.

Webflow adds w–current class to the “Active” page. You might be able to simply use this code:

<script>
$(document).ready(function(){
$( ".nav__link:contains('Music')" ).addClass('w--current');
});
</script>

Add this in Page Settings, in the body section.

Edit: You have to change nav__link to your nav’s class

[adrianwolfson]

Hi Danny
Thank you for posting the script.
I can’t get it to work so am I doing anything wrong here?
Do you think because my ‘contact-blog-podcast’ has the same name for the link it would affect this?
Also my nav link’s are actually text links would this be an issue? Do I need to change all my text links to nav links?
Also just to let you know I have always seen the hover colour in red in the page in question but not the selected(current) text which should be bold.
Thanks!

Screenshot 2020-05-28 at 15.39.39|394x500

[dennyhartanto]

Hey @adrianwolfson, could you share a published link so I can troubleshoott the issue?

[adrianwolfson]

https://preview.webflow.com/preview/adrianwolfson2020?utm_medium=preview_link&utm_source=dashboard&utm_content=adrianwolfson2020&preview=b65ff7399680dda8750d920f165891ea&mode=preview

[dennyhartanto]

Hey Adrian, thats the read-only link. Can you share the link after you have published it? It should end with webflow.io

[adrianwolfson]

adrianwolfson2020@webflow.io

thanks

[adrianwolfson]

Hi Denny
I actually got this working to a point but it only works with the word ‘Music’ or "Commercial’ depending on what I choose. Can this script actually find the name of the category because my films come under various different categories so I can’t just use ‘Music’ for everything. Or do I need to make a folder for each category instead of having a folder for all my films?
Thanks
Adrian

[adrianwolfson]

Hi Danny
I still haven’t got this working. Can you help?
Thanks

[mikeyevin]

Sorry for jumping in here but based on your last screenshot you’ll want to move your custom code to the Body tag (not the Head)—this is where you’ll need to use any jQuery. Not sure if that fixes your issue but I’ll take a peek at the replies above and see if there’s anything else I can add

[adrianwolfson]

Hi Mike
I realised I did that and moved it to body but it made no difference.
I am still struggling to get navigation to keep my style on cms template page.
I just don’t understand how the webflow infrastructure can allow the style to not continue when surely everyone designing a site here would want that style to be on all pages.
Thanks
Adrian

[dennyhartanto]

Hi @adrianwolfson, just saw this post again. Let me try to recall the solution and help you sort it out.

[mikeyevin]

So I took a peek at the previous replies and, while I’m definitely no expert in jQuery, I think the code provided by @dennyhartanto isn’t really what you’ll want to use here.

Can you do me a favor and reenable the read-only link so I can try another method instead?

[adrianwolfson]

https://preview.webflow.com/preview/adrianwolfson2021?utm_medium=preview_link&utm_source=dashboard&utm_content=adrianwolfson2021&preview=b65ff7399680dda8750d920f165891ea&workflow=preview

[dennyhartanto]

@adrianwolfson You’ve changed the nav__link to nav-cat-link-2 hence the code didn’t work. Aside, from that i just realise you need a way to register the category that has been clicked. Make sure you add these codes to your project custom code, not just a page.

$('.nav-categories').on('click', 'a', function(){
localStorage.setItem('cat', $(this).text());
});

$(document).ready(function(){
var cat = localStorage.getItem('cat');
$( ".nav-categories a:contains(" + cat + ")" ).addClass('w--current');
});

@mikeyevin please double check if the solution is good