Highlight current item

  • Resolved qwik3r

    (@qwik3r)


    5 years, 3 months ago

    Not sure if this is possible, but I’m trying to create a 1 page nav whereby the current selected item is highlighted. So far when you click the item, it adds the -clicked class and i can style that, but let’s say you visit the url with the anchor #id, it scrolls to the appropriate section but the item is no longer highlighted, because it technically wasn’t ‘clicked’. I thought that this would constitute the ‘highlight’ class but it doesn’t seem to.

    Any suggestions?

    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author malihu

    (@malihu)

    5 years, 3 months ago

    Hello,

    You should be able to highlight the links with the mPS2id-highlight class (more info).

    If the class above is not added automatically when the page is scrolled to the target, check if you have enabled “Allow only one highlighted element at a time” option and disable it and/or add a specific selector in “Highlight selector(s)” option.

    I’d be able to help more and possibly provide an exact solution if I could see your site/page. Can you post your URL?

    Thread Starter qwik3r

    (@qwik3r)

    5 years, 3 months ago

    Thank you. It appears the class is being added, but what I think what was happening is that it would remove itself when I would scroll back up to the navigation, so I thought it wasn’t being added. My intention was to sticky the nav anyway, so once I did that, and I was scrolled to that section, I could see the highlight class. Thanks for your help and cool plugin!

    • This reply was modified 5 years, 3 months ago by qwik3r.
    • This reply was modified 5 years, 3 months ago by qwik3r. Reason: made a mistake, was my own error so removing second edit
    Plugin Author malihu

    (@malihu)

    5 years, 3 months ago

    You’re welcome 🙂

    Thread Starter qwik3r

    (@qwik3r)

    5 years, 3 months ago

    One other thing I’m noticing is that multiple things are being highlighted. I think because both are in view. I have the option “allow only one highlighted item at a time” checked but it doesn’t seem to do anything.

    I get why both would be highlighted if they’re both in the view, but is there anyway to mitigate this?

    Plugin Author malihu

    (@malihu)

    5 years, 3 months ago

    Yes. You might want to use the mPS2id-highlight-first class (instead of mPS2id-highlight`). This said you might need to set a specific “Highlight selector(s)” option value like:

    .menu-item a

    This will apply the highlight classes only on the wp menu links (and not on every link in the page).

    A combination of the “Highlight selector(s)” option value and the use of mPS2id-highlight-first class should do the trick.

    Thread Starter qwik3r

    (@qwik3r)

    5 years, 3 months ago

    I tried that highlight-first class and looked at the source and didn’t see that it was being added. As for doing the highlight selectors option, am I supposed to be targeting sections with an id, or the anchors that lead to them?

    Plugin Author malihu

    (@malihu)

    5 years, 3 months ago

    The anchors that lead to them. You should add the selector (same as CSS selector) of the links you want to be eligible for highlighting.

    The mPS2id-highlight-first class is not added probably because some other link gets this class and you need to specify a highlight selector.

    Thread Starter qwik3r

    (@qwik3r)

    5 years, 3 months ago

    So I’m still having a bit of trouble. Here’s an example scenario: https://share.getcloudapp.com/kpu7Kom2. The ids are attached to h2, rather than the section, and the content likely wouldn’t be so close together, but it could be. I am styling the highlight class, hence the underline, and as you can see it underlines both items because I guess they are both in view. Maybe there is no way around this?

    Edit: Targeting the highlight-first class seems to have resolved the issue, thanks!

    • This reply was modified 5 years, 3 months ago by qwik3r.
    Thread Starter qwik3r

    (@qwik3r)

    5 years, 3 months ago

    I’m having a heck of a time getting this thing to work properly. Half the time it works then it doesn’t. Is there a way to get in touch privately so I can share the url?

    Plugin Author malihu

    (@malihu)

    5 years, 3 months ago

    Of course. Send me an email.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Highlight current item’ is closed to new replies.