- This topic has 16 replies, 4 voices, and was last updated 2 years, 1 month ago by epickenyan.
March 24, 2019 at 10:49 am #848427Patrick
I’m using the smooth scroll feature with my primary menu. So I have a Menu item with a custom URL that’s called https://example.com/#about and a section with the id=”about”. Scrolling works perfectly.
I checked my Site with https://web.dev/. The only problem seems to be with the Accessibility. It says the following:
These are opportunities to make sure your HTML is appropriately structured.
[id] attributes on the page are not unique
The value of an id attribute must be unique to prevent other instances from being overlooked by assistive technologies.
<ul id="menu-primary" class=" menu sf-menu"> <li id="menu-item-125" class="smooth-scroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-125"><a href="https://example.com/#about" aria-current="page">About</a></li> <li id="menu-item-72" class="smooth-scroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-72"><a href="https://example.com/#contact" aria-current="page">Contact</a></li>
+ all the other links
What can I do?GeneratePress 2.2.2GP Premium 1.7.8March 24, 2019 at 1:36 pm #848506Joan
You’re saying that both your link and ID contain “#about”?
Only your link is supposed to contain “#about”. The ID is supposed to contain simply “about”, without the “#”.
Could that be it?
***Oh, you just made a typo, I see you now corrected it.***
Not that then.March 24, 2019 at 1:47 pm #848511Patrick
Nope 🙁 checked it, its correct. Those two are connected for example
<a href=”https://example.com/#about”>About</a> and <section id=”about”>Blala</section>
But that output from web.dev makes no sense to me. Or does Google think the URL /#about is also an id? I don’t get it.March 24, 2019 at 1:59 pm #848517Joan
I reproduced exactly what you did on one of my pages (yup, I have nothing better to do. Lol), and checked it with web.dev and it didn’t give me the same result as you. Everything was ok.
So I would say you have a duplicate ID somewhere on the page that isn’t easy to see.
Are you using Chrome? You can just open the Developer tools under “More tools”, for your page and run the Audit or click the “Accessibility” tab and then expand the “Accessibility Tree” and see if it gives you more info about where on the page the duplicate is.
It might not be easy to find, but it’s there somewhere. I looked up a couple of posts from people who had similar issues in the past (not GP users), and they thought web.dev was making a mistake, but it turned out no…but they had to do some digging around in their page.March 24, 2019 at 2:33 pm #848528Joan
I found a duplicate ID extension for Chrome. It scans the page looking for ID Attributes and highlights the duplicates. Tested it and it seems to work.
***Correction: It doesn’t highlight the duplicates, but just tells you where on the page to look if there is one or possibly one.March 24, 2019 at 2:44 pm #848529Patrick
I finally found the problem, when I deactivate “Menu Plus” the problem disappears. I activated it today so I can use the sticky navigation feature.
So maybe this is something Tom has to fix, idk.
Thanks again, it was driving me crazy
The issue is still not resolved tho 🙂 At least we now know where its coming fromMarch 24, 2019 at 2:51 pm #848530Joan
Wow, the audit and dup-id extension found several.
Glad I could help a little. 🙂March 24, 2019 at 3:12 pm #848551Joan
Hey, I was thinking…(dangerous thing for me to do. Lol):
You might try to have your custom url be something different at the end, like #about123, and make your ID about123 and see if that works. When making your link, you can still set the label of the menu as “About”.
It could just be the commonality of “about” as an ID that is causing the issue – perhaps several instances of “about” in the code generally, I mean.
Not sure about that, but might be worth testing some different variations.
TcMarch 24, 2019 at 3:18 pm #848555Patrick
It seems the “Menu Plus” Module is duplicating my Menu somehow. It even happens with Page Menu Items not just my custom urls.
Maybe you could try to replicate my problem, if you don’t mind 🙂
–> activate “Menu Plus” Module with Sticky Navigation in the customizer and transition:none and desktop-onlyMarch 24, 2019 at 4:12 pm #848576Joan
Just came back. Replicated everything and YES, problems for sure:
Possible Duplicate IDs: menu-item-574 found 2 times menu-item-748 found 2 times menu-primary found 2 times primary-menu found 2 timesMarch 24, 2019 at 4:21 pm #848579Joan
I used the Dev Tools console to do a search on the code for “about” and I think you are correct: It appears to be duplicating the menu code. 🙁March 24, 2019 at 4:38 pm #848587TomLead DeveloperLead Developer
I believe this is an issue with our sticky navigation at the moment. It happens because the sticky navigation clones itself to prevent the page from jumping when the navigation becomes fixed.
I’ll see if I can get this fixed in GPP 1.8 🙂March 24, 2019 at 4:50 pm #848602Joan
Well, I don’t use the sticky nav, just trying to help Patrick. I like trying to solve puzzles now and then. 🙂
Thanks!March 25, 2019 at 2:14 am #848833Patrick
Ah that makes sense, at least I know now what’s happening 🙂
Thanks, Joan and TomJune 3, 2019 at 9:54 pm #919107epickenyan
I saw this feature was added in 1.8 then removed coz it was breaking some fonts? Will it be added back, Tom?
- You must be logged in to reply to this topic.