CODEWITHSUNDEEP
htmlmobileanchor
Phil Penny
Phil Penny

Reputation: 123

Anchor link working on desktop but not mobile

I have a responsive nav that converts to an off screen menu for mobile. it only has anchor links in it. It works perfectly on desktop but when the menu changes to the mobile version, clicking the link doesn't move the page to the correct point.

There is javascript being used to show and hide the menu. I cannot see any errors in chrome's console when clicking around.

Because of the differences between mobile and desktop, I have two similar blocks of html, one with a class"desktop" and the other with a class"mobile", these are shown/hidden based on media queries. They have identical id's for the sections, would it be the case that the nav is always trying to find the "desktop" sections rather than the "mobile" sections?

Upvotes: 0

Views: 2722

Answers (2)

Rustle
Rustle

Reputation: 1

They have identical id's for the sections, would it be the case that the nav is always trying to find the "desktop" sections rather than the "mobile" sections?

Yes. ID attribute values must be unique, even if any of them are hidden. On your mobile browser, clicking the link sends it to the first ID match that it can find, i.e. your "desktop" section.

If required for other purposes, you can still use separate blocks of code for desktop and mobile, but you'll have to use different IDs for each element. E.g.

<div id="element-A-desktop">This shows on desktop.</div>
<div id="element-A-mobile">This shows on mobile.</div>

Upvotes: 0

Phil Penny
Phil Penny

Reputation: 123

My thoughts were correct. Though the "desktop" code is hidden, the nav still points to it on mobile, thus is appears that the page doesnt scroll.

Upvotes: -1

Related Questions