Separate mobile menu to scroll down to color section only on mobile

Hi Guys,

I’m mocking up a new site for a client. I have anchors for two color sections, about and contact.

The contact anchor is the same on the desktop and mobile.

The about anchor however leads to a color section which is different on the desktop and mobile. I need it scroll to the about section on the mobile version. It does scroll to contact obviously as thats the same on both versions.

So I made a separate menu for the mobile version and used the anchor #about-mobile whereas the desktop uses #about. The about section hides from the larger screens on the mobile version and likewise the desktop hides the smaller screens.

Thought I was being very clever, however the mobile menu doesn’t scroll to the about-mobile anchor but does to the common #contact anchor.

I can’t figure out why it doesn’t work. If it in fact can’t work that way is there another way of pulling this off?

Thanks so much.