导航|地址|刷新
Left sidebar navigation duplicate IDs (a…

Skip to contentWordPress.org

Showcase

Plugins

Themes

Hosting

News

Resources
Learn WordPress

Documentation

Education

Forums

Developers

Blocks

Patterns

Photos

Openverse ↗︎

WordPress.tv ↗︎

About
About WordPress

Make WordPress

Events

Five for the Future

Enterprise

Gutenberg ↗︎

Job Board ↗︎

Swag Store ↗︎

Get WordPress

Search in WordPress.org

Get WordPress

WordPress.org
Forums

Welcome to Support

Guidelines

Get involved

Log in

Welcome to Support

Guidelines

Get involved

Log in

Skip to content

Forums/ Theme: GeneratePress/Left sidebar navigation duplicate IDs (a11y & HTML validatio

Search for:Search forums

Left sidebar navigation duplicate IDs (a11y & HTML validatio

mawy23
(@mawy23)

1 week, 2 days ago

Hi,

I’m running the free GeneratePress theme (version 3.6.1, WordPress 7.0.2) and have run into an issue when placing the primary navigation menu in the left sidebar instead of the header.

Steps to reproduce:

Go to Appearance → Customize → Layout → Sidebar Layouts (or the relevant navigation location setting).

Assign the primary menu to the left sidebar navigation location.

Use Silktide Accessibility checker.

Observed behavior: The primary navigation menu markup appears to be output twice, resulting in duplicate id attributes on the nav/menu elements.

Expected behavior: The menu markup should be output once, the same as when the primary menu is assigned to a header navigation location — where this duplication does not occur.

Thanks in advance for looking into this!

The page I need help with: [log in to see the link]

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

ying
(@yingscarlett)

1 week, 2 days ago

Hi there,

The extra navigation you’re seeing is intentional in GeneratePress. It’s not actually rendering the navigation twice.

When the navigation location is Left Sidebar (nav-left-sidebar), GeneratePress does two things:

Renders the real navigation in the left sidebar.

Clones that navigation with JavaScript and inserts it after the header for mobile devices.

If you want to remove it completely, you can simply unhook it with this PHP code:
remove_action( 'wp_footer', 'generate_clone_sidebar_navigation' );

Thread Startermawy23
(@mawy23)

1 week, 2 days ago

Hi ying,

Thank you so much for the quick and clear explanation — that makes sense, and I understand that the cloning is intentional so that the menu is also available on mobile devices after the header.

That said, I’d like to follow up with one question: even if the duplication is intentional, doesn’t cloning the full navigation markup (including the id attributes) still result in invalid HTML, since IDs are supposed to be unique per page? From an accessibility standpoint in particular, duplicate IDs can cause problems — for example, screen readers or other assistive technologies relying on aria-labelledby, aria-describedby, or in-page anchor links may only find or announce the first matching element, which could make the second (cloned) navigation effectively invisible or confusing for AT users.

Would it be possible for GeneratePress to either:

strip/omit the id attributes from the cloned navigation, or

generate a distinct, unique id for the clone when it’s inserted via JavaScript,

so that the output is valid, unique-ID HTML while still preserving the intended mobile behavior?

Thanks again for your time and help!

ying
(@yingscarlett)

1 week, 2 days ago

Try this JS to remove the ID from the navigation below header.
document.addEventListener('DOMContentLoaded', function () {
const clone = document.querySelector('.sidebar-nav-mobile');

if (clone) {
clone.removeAttribute('id');
}
});

Thread Startermawy23
(@mawy23)

1 week, 1 day ago

Hi Ying,

thank you very much for the explanation and the JavaScript snippet.

I tried it and it helped me to solve the problem. However, I noticed that the <nav> element itself is only part of the problem. The cloned navigation also contains all of the original elements with their id attributes unchanged, so accessibility checkers (e.g. Silktide) still report numerous duplicate IDs.

To make the cloned navigation valid, all id attributes within the clone need to be removed (or regenerated with unique values), not just the one on the <nav> element.

The following script (written by ChatGPT) removes the id from the cloned <nav> as well as from all descendant elements:
document.addEventListener('DOMContentLoaded', () => { const clone = document.querySelector('.sidebar-nav-mobile'); if (!clone) { return; } // Remove the ID from the cloned <nav> itself clone.removeAttribute('id'); // Remove all IDs within the cloned navigation clone.querySelectorAll('[id]').forEach(el => { el.removeAttribute('id'); }); });
This resolves all duplicate ID warnings in my case.

That said, I still think it would be preferable if GeneratePress handled this internally when cloning the navigation, so the generated DOM remains valid and accessible without requiring custom JavaScript.

Thanks again for your help!

Thread Startermawy23
(@mawy23)

1 week, 1 day ago

Hi Ying,

Unfortunately I celebrated too soon: when I remove the IDs of the cloned menu via script, the mobile menu no longer opens when I click the hamburger button. So removing the IDs via JavaScript doesn’t seem to be a viable solution after all.

Do you have any idea how I could solve this differently?

Best regards

ying
(@yingscarlett)

1 week, 1 day ago

Try add a device-based condition in your JS, remove the IDs from the cloned menu only on non-mobile devices, and remove the IDs from the sidebar menu on mobile devices.

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

You must be logged in to reply to this topic.

GeneratePress

Support Threads

Active Topics

Unresolved Topics

Reviews

Tags

a11y

6 replies

2 participants

Last reply from: ying

Last activity: 1 week, 1 day ago

Status: not resolved

About

News

Hosting

Privacy

Showcase

Themes

Plugins

Patterns

Learn

Documentation

Developers

WordPress.tv ↗

Get Involved

Events

Donate ↗

Five for the Future

WordPress.com ↗

Matt ↗

bbPress ↗

BuddyPress ↗

WordPress.orgWordPress.org

Visit our X (formerly Twitter) account

Visit our Bluesky account

Visit our Mastodon account

Visit our Threads account

Visit our Facebook page

Visit our Instagram account

Visit our LinkedIn account

Visit our TikTok account

Visit our YouTube channel

Visit our Tumblr account

The WordPress® trademark is the intellectual property of the WordPress Foundation.
------
导航页打开网址