Since Pro 2.1.5 update: "active" class always active in navbar ID

[blueoaks]

I just updated from Pro 1.2.7 to 2.1.5. Prior to update, the local /#visit link in my main nav did not have a “active” class applied until the nav item was hovered. It worked perfectly.

Now [class*=“active”] is being added by Pro whether the link is hovered or not (presumably because the ID is on the current page). I’d like it to work the way it did before.

The nav link scrolls the user down the same page.

It works properly inside the Pro header builder but not on front end.

.e927-5.x-menu > li > .x-anchor[class*=“active”] {
background-color: #0065a4;
}

.e927-5.x-menu > li > .x-anchor {
font-size: 1em;
background-color: transparent; // this is being overridden by active class above even when not hovered
}

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item 
menu-item-home menu-item-2071" id="menu-item-2071">
   <a class="e927-5 x-anchor x-anchor-menu-item x-always-active" tabindex="0" href="http://wordpress-126497- 
362238.cloudwaysapps.com/#visit">
     <span class="x-anchor-content">
            <span class="x-anchor-text"><span class="x-anchor-text-primary">Visit Us</span></span>          
     </span>
   </a>
 </li>

[thai]

Hi There,

I could see that there is the x-always-active class in your menu item.

And this is how your menu item looks on my end:

Would you mind removing the background color and display it when hovers only?

Thank you.

[blueoaks]

I am not sure I understand what you’re asking me to do. The background colors (hovered and unhovered) are coming from the header builder settings.

The x-always-active class is being added by Pro, not by me. That’s the reason for my question. The behavior of this link has changed when I updated to 2.1.5. I have made no other changes and have not added any custom css to this navbar.

[friech]

Hi There,

Do you mean you don’t want the active-menu to have styling but keep it on hover? If so, please add this to Theme Options > CSS

.x-menu > li > .x-anchor[class*="active"] {background-color: transparent !important;}
.x-menu > li > .x-anchor[class*="active"]:hover {background-color: #0065a4 !important;}
.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary {color: #999 !important;}
.x-menu > li > .x-anchor[class*="active"]:hover .x-anchor-text-primary {color: #fff !important;}

Thanks,

[blueoaks]

Background interaction styles (set via the header builder) should not be applied until the element is interacted with. Otherwise why include this setting in the header builder?

So this seems like a bug that now requires css to overcome. Will this be fixed in a future update?

If this were a one-page site, with all the menu items linking further down the same page, they would all be “active” all the time and would all need this custom css to prevent the x-active-class styling from being applied until hovered. This seems like a bug, no? It did not do this before 2.1.5.

[Alaa]

Hi @blueoaks

Indeed, that’s a new feature and you can disable it from here:

You will get only the hover effect after disabling this option, which I understand is what you want.

Thanks.

[blueoaks]

thank you, that resolves my issue. I appreciate it. this was probably explained somewhere (?) but i must have missed it.

[Alaa]

Yes, this might be missed in the changelog notes posted here.

Thanks.