So depending on how familiar you are with JS/jQuery this could be extremely easy.
Included in your webiste ina JS file named pillar_slide.min.js, this is the file that has the scroll animation function.
First thing you'll want to do is create a CSS class that mimics the hover state. See the CSS below:
.custom-menu-primary .hs-menu-wrapper > ul > li > a.is-active {
color: #00025e;
border-bottom: 2px solid #00025e;
transition: border-color .125s cubic-bezier(.4,0,.2,1);
}
This styling is pulled directly from your current hover state. I added the class ".is-active", change this class name as needed to avoid any naming issues.
Now we can create some JS.
Since we now know how the browser is listening to the clicks we can just mimic that by copying the code from the pillar_slide ("think smarter not harder" as they say):
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(a) { // we copied this from the existing listener function
// first prevent the default funcitonality of the browser a.preventDefault();
// now that we've captured the click we want to remove the "is-active" class from all of the navi links
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').removeClass('is-active');
// now that the class has been removed from all links we will want to apply 'is-active' to the clicked link. this is done using THIS
$(this).addClass('is-active');});
This can be added directly into your pillar_slide.min.js, or added to a custom module.
How is your menu "jumping" to the sections? does the page reload to the section that corresponds to the clicked link? or is it a smooth scroll.
I ask because a simple jump link links to a section's ID (<a href="#section_id></a>) and the pag reloads with that ID appended to the url:
www.website.com/page#section_id
if that is th case then you could us some javascript to identify the section_id in the url, and us logic to match it to th appropriate link, adding a class to the link that gives the link the appropriate styling.
If it is a scroll effect than th url probably won't change, but there will be an on click javascript/jquery function. You can edit that function to assign a class to $(this), the link that was clicked.
The page uses javascript to do some smooth scrolling to the sections of the page. Do you know what we could use to change the active state please (not just for clicking on the menu item, but also when scrolling down the page?)
So depending on how familiar you are with JS/jQuery this could be extremely easy.
Included in your webiste ina JS file named pillar_slide.min.js, this is the file that has the scroll animation function.
First thing you'll want to do is create a CSS class that mimics the hover state. See the CSS below:
.custom-menu-primary .hs-menu-wrapper > ul > li > a.is-active {
color: #00025e;
border-bottom: 2px solid #00025e;
transition: border-color .125s cubic-bezier(.4,0,.2,1);
}
This styling is pulled directly from your current hover state. I added the class ".is-active", change this class name as needed to avoid any naming issues.
Now we can create some JS.
Since we now know how the browser is listening to the clicks we can just mimic that by copying the code from the pillar_slide ("think smarter not harder" as they say):
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(a) { // we copied this from the existing listener function
// first prevent the default funcitonality of the browser a.preventDefault();
// now that we've captured the click we want to remove the "is-active" class from all of the navi links
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').removeClass('is-active');
// now that the class has been removed from all links we will want to apply 'is-active' to the clicked link. this is done using THIS
$(this).addClass('is-active');});
This can be added directly into your pillar_slide.min.js, or added to a custom module.
I'd love if I could ask you a couple of follow-up questions in regards to this please?
1. This works perfectly for when the menu items are clicked, but what if a user clicks a menu item, then scrolls into the next section - how can we make the next section use the active class, and remove it from the previous section?
2. Sometimes (randomly, not always) the anchor links end up in the wrong position, e.g. just above the title text, instead of the seciton - then when I try again, it often corrects itself. Any idea what could cause this? It looks as though it's when I click on the first link, then onto another link!
Jun 20, 201910:06 AM - edited Jun 20, 201910:07 AM
Recognized Expert | Partner
Changing active states of anchor links as the user scrolls past the sections
SOLVE
Sorry for my delay!
So with this new requirement I would approach this a little differently.
So what might work best is to build a function or use a plugin that listens to the window/document scroll event and given its location it highlights the approcpriate link, rather than relying on a click event!
Since the scrollTo animation is already in place this approach will work for both scroll animation and manual scrolling!