1

Sometimes the links under the <div> element of the header cart are not clickable in the cart menu of my website.

HTML:

<div class="shopping-cart-btn">
    <a href="https://domain.tld/cart">View Cart</a>
    <a href="https://domain.tld/checkout">Checkout</a>
</div>

CSS code of the <a> tag:

.shopping-cart-btn a {
background-color: transparent;
border: 2px solid #eeeeee;
color: #454545;
display: block;
font-size: 14px;
font-weight: 500;
padding: 14px 20px 12px;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease 0s;

I tried setting z-index: 9999; position: relative; into the above class but it is still not working.
Also tried using <span> for the URLs but still, the links are not clickable.

To reproduce, go to retracted and then add any item to the cart, click on the bag icon on the top right side of the page and try clicking on both the links "VIEW CART" and "CHECKOUT". Sometimes it works but most of the time it doesn't work.

Check error enter image description here

EDIT: Please see mplungjan's comment for a possible solution as this question got closed wrongfully with unrelated solution.

mdhz
  • 113
  • 1
  • 10
  • You need to share your html and JS code for us to see what's happening there. – Link Nov 09 '20 at 06:27
  • check console error – Lalji Tadhani Nov 09 '20 at 06:35
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor HERE AT SO - when you have fixed the issue on your website this question is otherwise useless to other visitors – mplungjan Nov 09 '20 at 06:36
  • @LaljiTadhani There is no error in the console. – mdhz Nov 09 '20 at 06:38
  • @mdhz added screenshot check now – Lalji Tadhani Nov 09 '20 at 06:43
  • 1
    There must be a pointer-event: none or an e.preventDefault somewhere – mplungjan Nov 09 '20 at 06:46
  • @LaljiTadhani It's a jQuery issue, nevertheless, I implemented the jQuery migration script to resolve those errors and warnings. – mdhz Nov 09 '20 at 07:11
  • 1
    @mplungjan Yes there is pointer-event: none but removing that didn't solve the problem. But indeed there was e.preventDefault in a js file and commenting that SOLVED the problem. Thank you so much. – mdhz Nov 09 '20 at 07:12
  • I don't know who closed this question and added some unrelated topic to the original post but opening this question would be grateful so that I can write the solution for others in the case. – mdhz Nov 09 '20 at 07:17
  • I closed it. An answer is not needed. You had code that blocked the link. You removed it. Not so useful to others., The dupe is how to disable a link - either using preventDefault or pointer-events. And that is what you had – mplungjan Nov 09 '20 at 07:21
  • @mplungjan Ah ok. – mdhz Nov 09 '20 at 07:25
  • 1
    Anyway, great you found the issue – mplungjan Nov 09 '20 at 07:26

0 Answers0