Joomla Templates Club 406,261 posts

[dinamoxx Friend dinamoxxJoin date: April 2012Posts: 13Downloads:0Uploads:0]

#177104

Hi There,

Thanks a lot for the Lens template. It’s quite good, though not very easy to use. But once you get your hands around it it’s OK.

Question: in http://www.mediainternet.com you will find the first version of the site. As you will see the logo has been replaced, but when a user hovers over it there is no change in the behavior of the pointer except on the left hand side. In most of the logo the mouse cannot click.
This is the CSS code I have as of today. What should I change?

#logo {
float: left;
position: relative;
width: 233px;
height: 60px;
background: none;
}

#logo h1 {
height: 60px;
width: 233px;
background: #de3068;
}

#logo h1 a {
color: #fff;
padding-left: 0px;
width: 233px;
height: 60px;
line-height: 60px;
background: url(../images/logo.png) no-repeat center center;
display: block;
font-size: 0px;
text-indent: -9999em;
}

#logo h1 a:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-transition-timing-function: linear;
}

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(360deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}

@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
25% {
-moz-transform: rotate(360deg);
}
50% {
-moz-transform: rotate(0deg);
}
75% {
-moz-transform: rotate(-360deg);
}
100% {
-moz-transform: rotate(0deg);
}
}

#logo h1 a span {
display: none;
}

Thanks a lot!

Charlie

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#453353

Hi Charlie,

Yes, i saw that error on your site. Please PM me with your info (admin access and FTP account) of your site. I will help you with it.

Regards

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#453584

<em>@dinamoxx 319900 wrote:</em><blockquote>Hi There,

Thanks a lot for the Lens template. It’s quite good, though not very easy to use. But once you get your hands around it it’s OK.

Question: in http://www.mediainternet.com you will find the first version of the site. As you will see the logo has been replaced, but when a user hovers over it there is no change in the behavior of the pointer except on the left hand side. In most of the logo the mouse cannot click.
This is the CSS code I have as of today. What should I change?

#logo {
float: left;
position: relative;
width: 233px;
height: 60px;
background: none;
}

#logo h1 {
height: 60px;
width: 233px;
background: #de3068
}

#logo h1 a {
color: #fff
padding-left: 0px;
width: 233px;
height: 60px;
line-height: 60px;
background: url(../images/logo.png) no-repeat center center;
display: block;
font-size: 0px;
text-indent: -9999em;
}

#logo h1 a:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-transition-timing-function: linear;
}

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(360deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}

@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
25% {
-moz-transform: rotate(360deg);
}
50% {
-moz-transform: rotate(0deg);
}
75% {
-moz-transform: rotate(-360deg);
}
100% {
-moz-transform: rotate(0deg);
}
}

#logo h1 a span {
display: none;
}

Thanks a lot!

Charlie</blockquote>

Dear ,

Please open templates/ja_lens/css/navigation.css , line 26 and change

#mainnav .menu-inner {
position: absolute;
right: 0;
width: 900px;
}

to

#mainnav .menu-inner {
position: absolute;
right: 0;
width: 730px; /* main width – logo’s width */
}

[Author]

Posts