Custom Header Links Problem (Mobile)

[ravynw34]

Hope someone has some advice. I have a client using version 1.5.4 of Zen Cart. An upgrade is going to be done soon but we have a slight issue in the meantime. The header has custom links on the right side. They are not working in mobile. They have worked when I looked on my phone (Iphone X Max) but it is random. Other people using various phones cannot get those links it brings you back to the the main page. Any ideas what the issue may be. http://theblingthing.com
Thanks in advance.

[lat9]

Something in your template's handling of those right-side "map" elements is setting the href in those links to all point to the site's base. If you've got a /common/tpl_header_mobile.php (or something similar) that's where I'd start looking.

[ravynw34]

Thanks. I will check that tonight.

[ravynw34]

So there apparently is no mobile template. The links are in the html_header.php in common under the template.
This is what is in there:
<!--Header Link Begins-->
<map name="header-link">
<area shape="rect" coords="754,55,1000,93" href="index.php?main_page=page&id=9" target="_blank" alt="upcoming events">
<area shape="rect" coords="754,140,998,179" href="index.php?main_page=page&id=2" alt="Join Our Mailing List">
<area shape="rect" coords="755,183,995,222" href="http://blog.TheBlingThing.com" alt="Visit Our Blog">
<area shape="rect" coords="756,97,871,136" href="shopping-cart" alt="Shopping Cart">
<area shape="rect" coords="877,97,998,136" href="my-account" alt="Your account information">
<area shape="rect" coords="246,4,717,216" href="index.php" alt="home page" />
</map>
<!--Header Link End-->
So it looks like there is really no setup for mobile itself on those header links

[lat9]

That's weird, perhaps some javascript and/or jQuery getting in the middle? When I view the link you provided using FireFox's responsive viewer/mobile mode, I see that all those links have been converted back to the site's main page.

[ravynw34]

Yup. Will dig a bit deeper and see what I can find.

[ravynw34]

Strangely enough it seems to be a mobile size issue. If you change mobile view to anything higher then a phone (ie; tablet) it shows the links.

[raptar]

Hi ravynw,
You have mapped your image with area coordinates which works great on desktop. But for mobile viewing you have reduced the image map size, yet have not changed the area coordinates to match the new map size.

Regards raptar