The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Hover Navigation

2 posters

Go down

In progress Hover Navigation

Post by Jellydonut May 7th 2012, 1:11 am

Using the search bar, I saw a few threads on this, but it was hard to understand.
How can I make it so when I mouse over a button on the navigation bar, it will change colors? I already have the buttons recolored in the image I want ti to change to, but I don't know how to actually use it. I'm sure it's a code, but I'm really bad with codes, so I'd need to know what I'd have to insert into each code to make it work, if you get what I mean.


Last edited by Jellydonut on May 9th 2012, 11:46 pm; edited 1 time in total
Jellydonut
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. May 7th 2012, 12:05 pm

Hi

Remove your navigations out of Admin panel and add them all
through CSS. Also go to Display >> Headers and navigations
>> Display only images in nav bar: YES

Do this for the static image:
Code:
#i_icon_mini_index {
background-image: url('IMAGE LINK GOES HERE');
width: XYpx;
height: XYpx;
}

And than this for hover:
Code:
#i_icon_mini_index:hover {
background-image: url('IMAGE HOVER LINK GOES HERE');
width: XYpx;
height: XYpx;
}

Do it for all navigations, just change the end of #i_icon_mini

Like this:
_portal {
_portal:hover {

This is for the rest of navigations:
_profile
_calendar
_gallery
_message
_new_message
_register
_login
_logout
_search
_faq
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut May 7th 2012, 11:55 pm

Thanks!
Do I keep they XYpx; the same, or do I have to insert a length and width amount?
Jellydonut
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. May 8th 2012, 7:58 am

Jellydonut wrote:do I have to insert a length and width amount?

Yes, you have to add your images value instead of X & Y.
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut May 9th 2012, 11:46 pm

Oh, ok
Solved now!

Ek, sorry, I marked it too early.
Is there a way to make it like, fade into the hover image? Forgot to ask that earlier xP
Jellydonut
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut May 10th 2012, 3:05 am

Is that first one the fade in/out one?
And do I have to do it for every image?
(sorry, I'm REALLY bad with coding)
Jellydonut
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Jellydonut May 10th 2012, 4:00 am

Alright, thank you (:
I'll try using these tomorrow maybe. Even though this is solved, would you mind if I left the tread open so I can make sure I don't have any problems with it tomorrow? If I can figure it out, I'll mark it solved then.
Jellydonut
Jellydonut
Forumember

Female Posts : 572
Reputation : 27
Language : English
Location : Illinois

http://www.googlesclub.forumotion.com

Back to top Go down

In progress Re: Hover Navigation

Post by Nera. May 10th 2012, 10:50 am

It will stay open.
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum