OpenCart Community

Posted: **Sun Aug 05, 2012 5:19 pm**

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/

Posted: **Sun Aug 05, 2012 6:58 pm**

change the z-index of the live help to be smaller than the z-index of the buttons

Posted: **Mon Aug 06, 2012 3:04 am**

Thanks. It worked for the logo image, but not the social media buttons.

Posted: **Mon Aug 06, 2012 7:28 am**

Continue trying. Make z index of the buttons 999 would surely do

Posted: **Mon Aug 06, 2012 3:41 pm**

Still nothing I'm afraid. I had to remove the changes to the images as they caused problems.

Posted: **Mon Aug 06, 2012 3:53 pm**

First of all correct the error

Code: Select all

title"Chat with us"

into

Code: Select all

title="Chat with us"

Posted: **Mon Aug 06, 2012 3:57 pm**

Thanks, fixed! I didn't even see that.

Posted: **Mon Aug 06, 2012 4:15 pm**

Ok, now move the cart 180px to the left, because it overlaps livehelp.
At line 143 change

Code: Select all

	right: 160px;

into

Code: Select all

	right: 340px;

Posted: **Mon Aug 06, 2012 4:21 pm**

Another option is to set the width and z-index for livehelp
Line 268

Code: Select all

#header #livehelp {
	text-align: right;
	vertical-align:middle;
	position: relative;
	padding-top: 7px;
	padding-right: 7px;
	z-index: -1;
}

Change into

Code: Select all

#header #livehelp {
	text-align: right;
	vertical-align:middle;
	position: relative;
	padding-top: 7px;
	padding-right: 7px;
	z-index: 2;
	width: 300px;
}

Posted: **Mon Aug 06, 2012 4:42 pm**

I tried both, but they shifted the items over the logo.

Posted: **Mon Aug 06, 2012 5:27 pm**

Then we can try to put the cart and the content to the left.

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;
}

Change into

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;
}

And at line 175

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;
}

Into

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;
}

Posted: **Tue Aug 07, 2012 3:36 pm**

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.

Posted: **Wed Aug 08, 2012 1:28 am**

Sorry, I was being very stupid. Your modifications worked perfectly. Thank you very much!

OpenCart Community

DIV too long?

DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?

Re: DIV too long?