Hover Navigation
2 posters
Page 1 of 1
Hover Navigation
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.
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 Wed May 09, 2012 4:46 pm; edited 1 time in total
Re: Hover Navigation
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:
And than this for hover:
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
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.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Hover Navigation
Thanks!
Do I keep they XYpx; the same, or do I have to insert a length and width amount?
Do I keep they XYpx; the same, or do I have to insert a length and width amount?
Re: Hover Navigation
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.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Hover Navigation
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
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
Re: Hover Navigation
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)
And do I have to do it for every image?
(sorry, I'm REALLY bad with coding)
Re: Hover Navigation
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.
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.
Re: Hover Navigation
It will stay open.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» Blue arrow hover : navigation hover bar
» Hover Navigation Bar Help
» Navigation bar hover
» Navigation Bar Change on Hover
» Silver hover Navigation bar
» Hover Navigation Bar Help
» Navigation bar hover
» Navigation Bar Change on Hover
» Silver hover Navigation bar
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum