eCommerce construction > How-to questions

Positioning Modal Box For Cart/Checkout On Static Pages


I'm setting up AbanteCart for use with an existing static website. Embedding is just about there but I'm having issues with the modal box for cart/checkout. I have a fixed navbar, using DD Smoothmenu, loaded from a separate html page with Javascript. if the page is not scrolled the modal box sits on top of the menu (& all other page elements), where it needs to be. When the page is scrolled the menu moves to the top of the page, as required but the modal box then sits behind the menu with the top half of the title bar obscured. I've tried adjusting the z-index setting for the html page elements but it's made no difference.
Ideally I would like to either adjust the z position of the modal box or to move it a few pixels down the page. I've tried to identify the relevant AbanteCart files without much success. If someone could advise me on which files I need to change it would be appreciated.
Also knowing which files are needed to edit the title bar would be useful.

Welcome to AbanteCart forum.

I do not think z-index will help. Usually, the overflow property is used to avoid scrolling on the HTML element.
Are you able to share the link or screenshots?

Thanks for the reply.
Forum would not allow me to post link so I've attached two screenshots.
Page is coded to enable the menu to stay visible at the top of the screen at all times.
In the first one if “add to cart” is clicked before scrolling the page the box sits above everything else, as intended. In the second picture, scrolling the page first, until the menu sits at the page top & then clicking “add to cart” results in the box sitting behind the menu.
I've tested on Firefox, Chrome, Edge & Opera, all with the same results.


[0] Message Index

Go to full version
Powered by SMFPacks Social Login Mod