0

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:

  1. 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..
  2. 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:

enter image description here

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;
position:relative;
}

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.

Fjott
  • 1,107
  • 3
  • 15
  • 38
  • 2
    `a.cart-contents{position:relative;}` should be enough, if not add to it: `z-index:1;` https://jsfiddle.net/wkkk62qj/6/ – G-Cyrillus Apr 24 '17 at 13:54
  • Thank you! I added `.cart-placement {position:relative;}` - this solved the first issue regarding the un-clickable link. The second issue with the count alignment is still the same – Fjott Apr 24 '17 at 14:13
  • 1
    you need to reset some values and add important to rules overwritten by other css https://jsfiddle.net/wkkk62qj/7/ – G-Cyrillus Apr 24 '17 at 14:33

3 Answers3

2

please add position:relative; in .cart-placement this class

.cart-placement {
  float: right;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: inline-block;
  line-height: 50px;
  padding: 0;
  position:relative;
}
Shital Marakana
  • 2,817
  • 1
  • 9
  • 12
2

as I commented :

  • first issue is fixed with : position:relative; that brings element up front.z-index might be needed if another positionned element uses it with a value higher to 1

for the rest

  • use important for padding to overwrite your main CSS rules, reset also some display and vertical-align to middle.

  • round can be fixed with height and width + text-align and line-height (use em value to match your font-size)

snippet:

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: left;
  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: middle;
  display: inline-block;
}

.cart-contents:hover {
  text-decoration: none;
}

.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

.cart-placement {
  float: right;
  padding: 15px!important;
  /* overwrite any reset elsewhere*/
  line-height: 50px;
  padding: 0;
}

a.cart-contents {
  color: #ff7454 !important;
}

a.cart-contents {
  position: relative;
}

.cart-contents-count,
.fa {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em
}
<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>
  • the div in the link should be an inline tag such as a span .
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

Change the z-index to -1 of before element like this : 

header[role='banner']:before{
    z-index: 0;
    ...
}
Cyril Beeckman
  • 1,248
  • 10
  • 24