Hi,
I’m trying to have a different color of a button on my side nav, when that button is pressed and it’s landing page is opened.
Unable to figure this out. Can anyone help?
Welcome to the forums @Aakarshna 
Am I right in my understanding that you want your buttons to change colour when you hover over them, like this?
In that example, I am hovering over “News”, and “Home” is the current page which is why it is slightly shaded.
If this is what you are after, have you explored the “hover” and “current” states of your element (in the top right of the Designer when you have the nav button element selected)?
Here’s a video on the subject.
Let me know if I misunderstood you.
Hi Andy,
Thank you for responding, however - my problem is not with hover, my problem is with when I have clicked on the nav menu button. After clicking I want a different color to show.
And I can’t seem to figure out the ‘current’ state too with the nav link button, since if I change the page to: Home (in which case ‘current’ starts reflecting), I lose my redirection URLs for all these categories.
Do you just want the different colour to show WHILE it’s being clicked? Or do you mean you want the colour to change permanently?
If you want it to change colour while being clicked, simply select the “pressed” state in the second image I shared - any styling you apply to the “pressed” state will only show when the button is clicked or tapped (e.g. colour change).
I’m not sure what you mean in your second paragraph - if you can share your read-only link I’ll be happy to take a look.
I mean, ‘after I click’, the active color state should be retained. However, that’s not happening. The color states are only working for hover and pressed. But the color goes away when I land on the respective page. It should stay so that a user knows ‘which page am I on?’
Won’t be able to explain the second para better, best if you could have a look at the read-only file 
Solved it (I think this covers both of your questions). It was just the way that you had styled the links. Give me two secs and I’ll write the solution…
1 Like
Ok, so at the moment, you’ve got styling applied to Heading 2. Because Heading 2 is a child of Side menu category, the styling applied to Heading 2 will always override its parent’s styling.
We’ll start on the Home page.
- Remove typography colour styling from
Heading 2.
Before: 
After: 
- Set the typography colour style of
Side menu categoryto black (in order to set all of the links to black as standard).
Before: 
After: 
- Go to the page Categories Template. In this example, it has taken us to the Doodling CMS Item Page. So, ensure you are on the same page, and select the Doodling link on the side (make sure you have selected the
Side menu category, not theHeading 2).
- With that selected, in the top right it should say “Side menu category” and “Current”.
- I can see that you’ve already applied styling to the Current state - good! That is why, in the image for Step 3 above, the Doodling link is blue.
If you experiment with clicking through the links, they will all now correctly retain the Current colour. The problem stems from the fact that you had overwritten all styling applied to all states of Side menu category by applying styling to Heading 2.
Does that all make sense? You can also try experimenting with Opacity to further differentiate between Hover and Current States. Here’s the result if I apply a 50% opacity as well as the colour change to the Hover state - you can see that it is solid blue for the current page, and a faded blue for hover:
Followed all these steps. Made it work, but I lost all my styling. Now the nav bar looks bad.
And I don’t know how to fix, because to fix this I’ll have to apply styling to ‘Heading’.
Exactly what styling was lost? Can you create a Loom video (or alternative) so I can see what’s happening?
Hey guys I have same problem, however Im using NavBar element out of the box, I haven’t applied any styling yet, I only added links to different sections of the page. So when that section comes into a view, the the Nav Link changes its color to blue. Im trying to change that blue color into different color and can’t figure our why I can’t do it. By selecting “current” status of the Nav link I can change the style like BG color, boarders and it works BUT not that blue text color.
My category page nav bar and home page nav bar look different now. And I can’t style the ‘Side menu category’, only heading can be styled but you’ve suggested me to not do that.
1 Like
Oh, I think I see what you mean. Ok, so let’s make this simple. Is there any reason you’ve set it up as a Header within a Link Block? Why not just use a Text Link Block?
This way, you only have a single element that you need to be styling. Your structure seems unnecessarily complex at the moment and is likely the cause of the problem.
Here’s a share link to my own site - take a look at how I’ve structured the navbar.
1 Like
Ahhh, this sounds easy. Let me give this a try and get back here 
1 Like
Can you please take a quick look into my site. As I said Im using Navbar as it is and I haven’t messed it up yet, however to change that blue color seems like a bug.
Worked, thanks Andy 
Have a look?
Looks much better! Simpler to manage without that additional layer of complexity
1 Like
@Dovydas_Sidabras you didn’t have a class applied to your Nav Links. Apply a class to all of them (e.g. “navlink”), select one with the “current” state, and apply your styling.
Webflow links default to blue, so you will need to make sure you apply a colour even if it shows that there is already a colour style (you will see in the video below that it already says the “Current” state is red - be sure to override this even with just the same shade of red).
Oh! Applying class it worked! Thank you a lot. I got confused cos I was able to change other styles like BG and so on, but the text is a link and by default links without class are blue. Got it. 
1 Like
No problem - have fun!
Hi Andy
Can you help me with a similar problem. I have a bold font on my categories when clicking a category but when you go deeper and click on a video and go into the cms template page the bold category is no longer bold it reverts back to normal. How can I keep the category name in bold when looking at a video?
thanks
Adrian
https://preview.webflow.com/preview/adrianwolfson2021?utm_medium=preview_link&utm_source=dashboard&utm_content=adrianwolfson2021&preview=b65ff7399680dda8750d920f165891ea&workflow=preview