Menu not displaying properly on ipad - DAWN theme

[KateD199]

Hi, our menu is displaying incorrectly on ipad, it is taking up half the screen so customers are unable to check out or view products correctly. It seems to just be on apple ipads, but could be on other tablets too.

Attached image is what it looks like on desktop:

And on ipad:

Can someone please assist with fixing this? Thanks!

[namphan]

Hi @KateD199,

Please send the website link, I will check it for you

[KateD199]

Thanks! https://allstarpoolparts.com.au/

[KateD199]

any luck? 🙂

[namphan]

Hi @KateD199,

I tested it and it shows fine.

Have you tried testing on another device or trying disabling the tel app and testing again?

[KateD199]

Thanks for checking, I checked again on our end and it still seems to be happening. We have had about 4 reports from customers with the issue too, primarily on apple ipads - could have to do with the screen size? I am checking on an 11 inch ipad screen. 

The telephone button is just code as per below, I have tried removing it but the menu still displays incorrectly on ipad:

<script>

window.onload = function() {
if (window.innerWidth >= 1200) {
var ctoButton = document.createElement("a");
ctoButton.href = "tel:07 5511 2300";
ctoButton.textContent = "☎︎ 07 5511 2300";
ctoButton.className = "cto-button";

ctoButton.style.position = "absolute";
ctoButton.style.left = "48%";
ctoButton.style.top = "13%";
ctoButton.style.transform = "translate(-50%, -35%)";
ctoButton.style.background = "#154770";
ctoButton.style.padding = "4px 25px";
ctoButton.style.color = "white";
ctoButton.style.borderRadius = "10px";
ctoButton.style.textDecoration = "unset";
ctoButton.style.outline = "3px solid #15477091";

var announcementBar = document.querySelector("div#shopify-section-sections--17716337541364__announcement_bar_zemeGH");
var firstChild = announcementBar.firstChild;
if (firstChild) {
announcementBar.insertBefore(ctoButton, firstChild.nextSibling);
} else {
announcementBar.appendChild(ctoButton);
}
}
};

</script>