Anchor Links in One Page Website Menu all the same

[Design]

Hi guys,

I’m currently working on this website and am having some trouble styling the one page menu with anchor points.
https://sealand.dbwebsites.com.au/

I’ve been trying to follow a few of your previous forum posts with similar questions but nothing seems to be fully working.

I’ve installed the Page scroll to id plugin as this was a suggestion. But I don’t really know if it’s helping at all.

Ideally, I’d like to have the current menu item just highlighted with a border colour, and this be the same for when an anchor link is clicked, or if they scroll down the page, the current anchor link is highlighted when they are sitting on that section.

I’ve tried a bunch of different css – but not sure if anything is correct!

[Elvin]

Hi,

You site has a script that adds .current-menu-item to the nav button when the section is in view.

We can use that to have your navigations highlighted with a border color.

You can try this out.

.current-menu-item{
border: 2px solid #F69780 !important;
border-radius: 50px !important;
}

A wise man once said:
"Have you cleared your cache?"

[Design]

Yep I had something pretty similar before but I’ve removed that and put in what you suggested. Problem is that the anchor points are all being highlighted on load see screenshot here:https://snipboard.io/XoWk2V.jpg

And then on scroll, no anchor link is highlighted. https://snipboard.io/0ePNnU.jpg

[Leo]

Did you get it to work already?

I’m seeing different menu item being highlighted as I scroll down the page:
https://www.screencast.com/t/koaUPP0SiDX

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Design]

Hi Leo,

Yep all fixed! I think it was doing something funny as I was logged in. Thanks so much!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts