I've just re-done a website, but am having trouble with one of the divs. The tag "livehelp" seems to go across the entire header, making a lot of stuff unclickable.
How can I edit it so that the logo, social media buttons, and live help can be clicked?
Site: http://digitalsushi.co.za/
How can I edit it so that the logo, social media buttons, and live help can be clicked?
Site: http://digitalsushi.co.za/
change the z-index of the live help to be smaller than the z-index of the buttons
Continue trying. Make z index of the buttons 999 would surely do
First of all correct the error
into
Code: Select all
title"Chat with us"
Code: Select all
title="Chat with us"
Ok, now move the cart 180px to the left, because it overlaps livehelp.
At line 143 change
into
At line 143 change
Code: Select all
right: 160px;
Code: Select all
right: 340px;
Another option is to set the width and z-index for livehelp
Line 268
Change into
Line 268
Code: Select all
#header #livehelp {
text-align: right;
vertical-align:middle;
position: relative;
padding-top: 7px;
padding-right: 7px;
z-index: -1;
}
Code: Select all
#header #livehelp {
text-align: right;
vertical-align:middle;
position: relative;
padding-top: 7px;
padding-right: 7px;
z-index: 2;
width: 300px;
}
Then we can try to put the cart and the content to the left.
Starting at line 140
Change into
And at line 175
Into
Starting at line 140
Code: Select all
#header #cart {
position: absolute;
top: 0px;
right: 160px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 12px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}
Code: Select all
#header #cart {
position: absolute;
top: 0px;
right: 300px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 5px;
margin-top: 12px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}
Code: Select all
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Code: Select all
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 7px 0px 7px 7px;
-moz-border-radius: 7px 0px 7px 7px;
-khtml-border-radius: 7px 0px 7px 7px;
border-radius: 7px 0px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
I'm not sure that will solve the problem. From that I can see the social media buttons are in the same DIV as the livehelp, but when I remove them from that div everything goes crazy.
Who is online
Users browsing this forum: Amazon [Bot] and 67 guests