Joomla Templates Club 406,261 posts

[herb2586 Friend herb2586Join date: July 2010Posts: 42Downloads:0Uploads:5 Thanks: 9]

#158677

The image I’m using for a logo jumps downward a bit when you hover over it?

See: http://www.ainow.org/index.php

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371642

Adjust in height value here accordingly to 52px

h1.logo a {template.css (line 548)
background: url(“../images/logo.png”) no-repeat scroll left top transparent;
display: block;
height: 57px;
width: 222px;
}

[herb2586 Friend herb2586Join date: July 2010Posts: 42Downloads:0Uploads:5 Thanks: 9]

#371667

So I did the suggestion and it worked perfectly.
Then I got greedy and started messing around with the width. :-[ Ended up just going back to normal settings with the modification listed above.
It worked before I messed around but now the image still jumps even though set to 52 height?

/* Logo Image —*/
h1.logo { height: 57px; margin-top: 40px; width: 222px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left top;
display: block;
height: 52px;
width: 222px;
}

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371705

Mainly, You will need to adjust these dimensions in accordance with updated logo image by you 🙂

[herb2586 Friend herb2586Join date: July 2010Posts: 42Downloads:0Uploads:5 Thanks: 9]

#371732

Okay, no problem.
Can you explain what causes the logo to jump?
Do I need to decrease the height?

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371736

<blockquote>Can you explain what causes the logo to jump?</blockquote>

As you will notice that default logo consists of two images ::

/templates/ja_teline_iv/images/logo.png

Now, upon hover, The background position property has been applied to show in second logo which is hidden in active stage. Basically, This works through background positioning (css styling)

http://www.w3schools.com/css/pr_background-position.asp

If you wish, You can simply change this ::

h1.logo a:hover, h1.logo a:focus { background-position: left bottom; }

to

/*h1.logo a:hover, h1.logo a:focus { background-position: left bottom; }*/

and this wont happen, then 🙂

1 user says Thank You to aman204 for this useful post

1. herb2586

[herb2586 Friend herb2586Join date: July 2010Posts: 42Downloads:0Uploads:5 Thanks: 9]

#371746

Now that is the perfect solution. Thanks!!

[Author]

Posts