Hi. My coding knowledge is minimal and I basically get along with solely using VSD with only occasional coding when absolutely necessary. Here's my problem, and I was wondering if anybody could help. I am putting Paypal buttons on my website, and I want to use a minicart called minicart.js. Instead of the buyer being redirected to the Paypal cart when he adds an item to his cart, this snippet instead causes a minicart to pop up on the webpage whenever an item is added to the paypal cart. I correctly added the snippet into my HTML before the closing </body> tag, and the minicart pops up fine. However, the minicart shows up behind the other objects on my page. Here is one of my webpages with an example of the minicart behavior, which you can see by clicking one of the "add to cart" buttons:
http://www.bracks.net/Construction-Sets.html
As I understand it, the problem is with the Z-index in the CSS, and the Z-index for the minicart must be increased. Here is a solution I found by googling the issue:
**************************************
The Mini Cart is appears behind objects on the page when you have the position and z-index CSS properties set on an element. Insert the code below in Page HTML between<head></head> tags* set the z-index to what you require but I think 100 should be enough:
<style type="text/css">
#PPMiniCart {
position: relative !important;
z-index: 100 !important;
}
</style>
*************************************************
Is there a way I can implement this solution within VSD? I've tried inserting this in several different places within VSD, but I can't seem to get the minicart to appear over all of the other objects on my page. Any help would be greatly appreciated.
Thanks,
Bigfeet
Help with minicart.js - minicart...
Big Feet
Registered User
65 posts
Per
Senior Advisor
1,850 posts
Your highest, existing z-index seems to be 364. Since you want the minicart to always be on top of all other elements, its z-index must be greater than 364. If you set it to 500 or 1000 and place it as instructed before the closing </head> tag, it should work. 
Big Feet
Registered User
65 posts
Thanks, Per. I'm just trying to figure out how to place it before the closing </head> tag using VSD. I tried to do it under VSD's Edit>Edit header>Header HTML tab, and it didn't work. I tried under the button's "Insert HTML" > Header HTML tab, and that didn't work. Should I be inserting the code in one of those places?
Thanks again, Per.
Thanks again, Per.
Eric Rohloff
Senior Advisor
20,190 posts
Try hitting ctrl + alt + h then pasting the code to the header and publish.
<style type="text/css">
#PPMiniCart{
z-index:1000;}
</style>
#PPMiniCart{
z-index:1000;}
</style>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Big Feet
Registered User
65 posts
That worked, Eric! Thanks for adjusting the code for me to get it to work.
Again, thanks for much, Eric.
Again, thanks for much, Eric.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
