Archived topic
Anchor Links in One Page Website Menu all the same
5 replies · Started by Design on October 7, 2020
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!
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;
}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
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
Hi Leo,
Yep all fixed! I think it was doing something funny as I was logged in. Thanks so much!
No problem :)
