Anchor links are a powerful tool for smooth navigation on a webpage. However, certain setups can cause issues, especially on mobile devices. A common problem is having multiple sections with the same anchor link ID on a Divi site, which can lead to anchor links functioning correctly on desktop but failing on mobile. Let's explore why this happens and how you can fix it.

Understanding the Problem

In HTML and CSS, each ID must be unique on a page. If you have multiple sections with the same ID (to accommodate different device views), browsers typically recognize only the first instance, leading to clickable anchor links on desktop but not on mobile.

Workarounds and Solutions

Combine Sections into One:

If the content in the two sections is not significantly different, combine them into one section:

• Enable/Disable rows within that main section based on device size.
• Keep the main section (with the anchor link ID) visible at all times.

This approach ensures the ID remains unique and functional across devices.

Minimize and Style the Desktop Section on Mobile:

If combining sections isn’t feasible due to substantial content differences, you can:

• Keep the desktop section active on mobile but style it to minimize its presence:
• Set its height to 1px and hide its rows on mobile.
• Adjust margins and padding to reduce its vertical footprint.
• Match its background color to adjacent sections for a seamless look.

This maintains the section’s presence for anchor linking while making it visually unobtrusive.

Separate IDs for Mobile and Desktop:

For a more device-specific approach:

• Assign different CSS IDs to the mobile and desktop versions of the section.
• Create device-specific buttons/links that target these different IDs.
• Show/hide the appropriate buttons/links based on the device.

This method is more labor-intensive but can be effective for complex layouts.

Custom Code Solutions:

If none of the above solutions can be applied in your situation, it will probably be necessary to implement custom JavaScript to dynamically switch section IDs or modify link targets based on the device width.

This solution provides the most flexibility but requires a higher level of coding knowledge.