Forums

Hi, i hope someone can help as i’m beginning to lose my mind!!

I have a hamburger menu image that i’m using on my website, which once clicked it expands to show the menu. This all works fine across all browsers and devices. However, i’ve noticed that on an iPhone and iPad that if the image is clicked (and therefore the menu shown), if you then scroll down the page at this point, the hamburger image stretches and follows the scrolling – and i have no idea why. It only happens when the menu is open.

Please can someone help to explain why and how to resolve. Its driving me crazy trying to figure it out.

My HTML and CSS is below:

<

div>

#toppricearea
{
width: 15%;
position: relative;
z-index: 1;
background-image: url(/get_images/buttons/quick_price.gif);
}
#toppricearea .priceimage
{
width: 75%;
}

#price_guide
{
z-index:800;
display: none;
background-color: #FFF;
width: 200%;
}

http://codepen.io/anon/pen/NNOLEN