xnyjyh
January 22, 2024, 6:23am
1
Hello, I have a custom-coded link pop-up on my product pages. There seems to be a z-index issue that I cannot solve using z-index for some odd reason. see images… the pop-up goes under the menu bar and custom logo sections. Also, the overlay when the pop-up is active does not cover the whole page as it should. I would also, like to disable the scroll and hide the scroll bar on the active popup. how can these issues be fixed? code below and images to show issues.
CODE:
Shipping and payment options
×
Free complimentary shipping when you spend $300 CAD or more.
Shipping can be verified at any time by using the tracking number provided via email.
You may return damaged, defective, or wrong size/color products within 20 days of original order date.
Secure payment
We guarantee the maximum level of security for all transactions.
We accept:
May we help you?
Contact us
Send us a message
h2 {
text-align: left;
font-family: work sans;
font-weight:500;
color: #000;
}
.payment {
max-width: 200px;
}
.button {
font-family: work sans;
font-weight: 500;
font-size: 14px;
padding: 10px;
color: #000;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #000;
font-family: work sans;
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: 500;
text-decoration: none;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
.secure{font-weight:500;}
.free{font-weight:500;}
IMAGES:
Hi @xnyjyh ,
Can you provide link to your store?
Hi @xnyjyh ,
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code just above tag
RESULT:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
xnyjyh
January 23, 2024, 3:56am
4
It does work, thank you! I need to disable page scroll and hide the side scroll bar. Ive tried a few way and was unsuccessful
Hi @xnyjyh ,
Replace the previous code and see if that disables the scroll.
xnyjyh
January 23, 2024, 4:07am
6
Perfect it worked, one more thing, my header is supposed to be sticky. all pages content over laps it now.
Hi @xnyjyh ,
Replace the previous code with this updated code. This should make the header sticky.
{% if product %}
{% endif %}
xnyjyh
January 23, 2024, 5:41am
8
Would you know why after closing the form the page goes back to top? I dont like that lol. Would like it to stay right where it was opened.
is this easy?