Menu button stays highlighted on selected 'current' page

Hi all,

So I’ve tried several things that were already on the forum to resolve this issue but unfortunataly those options didn’t do it for me. So the issue;

On my website I have these menu buttons with an (mouse-over) hover animation on it, this works perfectly. But whenever I click e.g. ‘Portfolio’ the animation is rolled back because I mouse-out of the DIV, what I want is that the button keeps highlighed to indicate that you’re on the portfolio page.

I’ve tried to fix it with a link block to get the ‘current’ state but then I can’t animate anything because the animated parts are different DIVs and the ‘current’ state will be deselected… For now I’ve linked the ‘Portfolio’ button to scroll to the portfolio section. Of course the others buttons will link to other pages but since in read-only mode you can’t edit pages (read it somewhere) I thought this should be okay for now.

Hope someone can help me with this, if the read-only link isn’t working with animations then you can check the published website here: https://notsosquare.webflow.io/


Here is my public share link: https://preview.webflow.com/preview/notsosquare?utm_medium=preview_link&utm_source=designer&utm_content=notsosquare&preview=7b47cddcf8be03071f07e7182f8a966f&mode=preview

You mean that the sections should be highlighted when they are clicked(which should be always) even though you are not hovering on them?

Yes, so if there is nothing selected the ‘hover’ animation should do what it does now. But when the ‘portfolio’ section is selected (clicked) (or in this case scrolled to) then it should be highlighted and no ‘hover’ animation should be playing when mouse-over that highlighted button.

Hope this helps a bit :slight_smile:

w–current class lets you identify that the current menu is activated.You have to map the hover effect with w–current which will let it stay active.Can do this using custom css.

Thanks Vish for the help, unfortunately I’m using the free version of Webflow. I’m going to get the upgraded plan though, is there any chance you can provide me with that custom CSS code?

I’ve no experience with coding, therefore using Webflow :wink:
Thank you in advance!

what you can do is remove the hover animation for now and add the same animation on click.This should solve your hover out problem.

for hover you can add custom css for hover

a.btn_menu-container.w-inline-block:hover .btn_menu-hover {

  1. transform: translate3d(0px, 0px, 0px) !important;

}

a.btn_menu-container.w-inline-block:hover .btn_menu {

  1. color: yellow !important;

}

Hi Vish,

I think that I’ve done what you suggested; removed the animation and placed the custom code. But now it does nothing on hover, w–current state does nothing and when I click twice on the button then I’ll get the animation… not sure what’s happening; hopefully you can assist me, I have a paid plan so am able to use custom code :slight_smile:

Hi Vish,

As requested the public publish link: notsosquare.webflow.com

.w–current .btn_menu-hover, .menu-buttons a:hover .btn_menu-hover {
position: relative;
top: 0;
width: 100%;
height: 5px;
background-color: #fc0;
opacity: 1;
}

This should solve your hover and highlighting the menu item(about/lets talk) issue.For section highlight(portfolio) pls add an id to the portfolio section and link that id in setting of the portfolio link which should add the w–current class when the user is on that section and the above css will take of the highlight part