Button class being applied when it shouldn't

Support
#1

There are cases when the class x-currently-active gets applied to buttons when it should not be.

Example page: https://www.dentairconditioning.com/hot-water-heater-repair

Scroll mid page and you will see that the button in the “24/7 Water Heater Repair” is the button being affected (Should be orange and hover to blue). You will also notice that the hover color changes when you scroll into the section overall, while the unaffected buttons on the page hover properly only when hovering over the button itself.

The inspector shows that class being applied as soon as you enter the section, and being removed when you reach about 50px from the bottom.

Any information as to what is dictating this class being applied in this manner would be appreciated. Thanks.

#2

Hi Scott,

Thank you for reaching out to us. I checked your site and it’s happening because you’re using on page scrolling using that button. You’ve added the ID of a section #schedule in the button’s URL, when the page scrolls to the section that has the ID schedule a class x-currently-active is added to the button which suggests that the section is currently in view and active. To test this you can remove the ID #schedule from the button’s URL and the class won’t be added upon scroll.

Hope this helps!

#3

Thanks for the reply, and yes that is what is happening.

This behavior is making the assumption that the button will always link to content beneath it. As you can see that will not always be the case. Also, I do not see how having a section in the viewport being considered “active” relates to a button elsewhere on the page being “active” as well. The two elements are separate, and as such have separate states.

The purpose of the button in this situation is simply to link to another section on the page, it should not care about when a user interacts with that section.

So how do I disable that behavior?

#4

Hi Scott,

Could you please try adding the following JavaScript code into your X -> Theme Options -> JS area and see if that helps.

jQuery( ".page-id-382 #schedule" ).removeClass( "x-currently-active" );

Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.