Shopping cart icon unclickable

enter image description here

I am using the code from this article to add a shopping cart for my woocommerce plugin on my WordPress site. There is two issues with this code that I am facing when trying to implement in my theme:

  • The cart icon is not clickable even if the correct link is
    present. There is someting with the css code
    header[role='banner']:before that is causing this issue, but I
    have not been able to solve it..
  • Secondly, the cart-contents-count should be placed beside the cart on the same line, like the picture shows, not under as it is now.
  • The end result should look similar to this:

    I have reproduced and isolated the code underneath:

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
      display: block;
    }
    
    header[role='banner'] {
      height: 100px;
      background-color: yellow;
      top: 0px;
      width: 100%;
      z-index: 10000;
      border-bottom: 1px solid #ccc !important;
    }
    
    
    /* SOME THING HER CAUSES THE CART TO BECOME UNCLICKABLE*/
    
    header[role='banner']:before {
      display: block;
      position: absolute;
      content: "";
      width: 50%;
      height: 100%;
      right: 0;
      background-color: rgba(0, 0, 0, 0.02);
      z-index: 0;
    }
    
    #main-nav-wrapper {
      display: block !important;
      margin-top: 10px;
    }
    
    .nav {
      float: right;
      clear: none;
      border: 0;
      margin: 0px;
      z-index: 100;
      display: block;
      list-style: none;
      margin-top: 30px;
    }
    
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }
    
    .nav li {
      float: left;
      position: relative;
    }
    
    .nav li a {
      padding: 0px 20px !important;
      display: block;
      text-decoration: none;
    }
    
    .nav li a:after {
      content: '';
      width: 1px;
      height: 15px;
      background-color: #e8e8e8;
      display: block;
      position: absolute;
      top: 50%;
      right: 0px;
      margin-top: -7px;
    }
    
    
    /* CART */
    
    .cart-contents:before {
      font-family: 'FontAwesome';
      font-size: 28px;
      margin-top: 10px;
      font-style: normal;
      font-weight: 400;
      padding-right: 5px;
      vertical-align: bottom;
    }
    
    .cart-contents:hover {
      text-decoration: none;
    }
    
    .cart-contents-count {
      color: #fff;
      background-color: #2ecc71;
      font-weight: bold;
      border-radius: 10px;
      padding: 1px 6px;
      line-height: 1;
      font-family: Arial, Helvetica, sans-serif;
      vertical-align: baseline;
    }
    
    .cart-placement {
      float: right;
      display: inline-block !important;
      line-height: 100px;
      padding: 0;
      z-index: 20000;
    }
    
    .cart-placement {
      float: right;
      padding-top: 15px;
      padding-bottom: 10px;
      padding-left: 15px;
      display: inline-block;
      line-height: 50px;
      padding: 0;
    }
    
    a.cart-contents {
      color: #ff7454 !important;
    }
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
    <header class="header" role="banner">
      <nav role="navigation">
    
        <div class="cart-placement">
    
          <a class="cart-contents" href="http://www.bbc.uk.co" title="add to cart"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
    
    
                          <div class="cart-contents-count">1</div>
                      </a>
    
    
        </div>
    
    
        <div id="main-nav-wrapper">
          <ul class="nav main-nav clearfix">
            <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Home</a></li>
    
            <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">About</a></li>
    
            <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Contact</a></li>
    
          </ul>
        </div>
      </nav>
    </header>

    Same code at JSFIDDLE.

    Read more here: Shopping cart icon unclickable

    Leave a Reply

    Your email address will not be published. Required fields are marked *