Fade in and out hover nav bar

[Mookie]

(I've been searching for hours for this)

Does anyone know how to make a fade in and out thing for the nav bar?

[Kami]

Unfortunately "fade in and out thing" is not a very specific request. Do you have an example, or can you clarify your request?

[Mookie]

I don't really think it can be specific...

Hmmm........ Like when you hover over a link it fades to a different color? I've already been able to do it to links but I haven't seemed to find it for the nav bar. I found it once but I couldn't find it again.....

[Kami]

Oct 11, 2016 16:24:18 GMT -8 Mookie said:

I don't really think it can be specific...

Hmmm........ Like when you hover over a link it fades to a different color? I've already been able to do it to links but I haven't seemed to find it for the nav bar. I found it once but I couldn't find it again.....

The answer to this question is unfortunately dependent on the specific parameters you want. Did you want the whole background of the link including the link text to change colour or just the link text? Have you made any modifications to your forum that alter the nav bar? Are you referring to the navigation menu or the navigation tree? Did you want it to just change colour or to have an animated change? And so on and so forth.

Theoretically you could just copy what you did for the links and change only the class or id name to reflect whatever the nav bar class or id is and you'd get the same result, but it depends on if you've made any changes or if you even want it identical.

[Former Member]

You could do something like this

append to your stylesheet

.transition(@target:color, @time:.2s, @effect:ease-in-out){
   -webkit-transition: @arguments;
   -moz-transition   : @arguments;
   -ms-transition    : @arguments;
   transition        : @arguments;
}

#navigation-menu
{
 ul{
   li{
      a{
          color: white!important;
          .transition(color);
      }
      &:hover, &:focus, &:active{
         a{
            color: blue!important;
         }
      }
   }
 }
}

[Mookie]

you didn't seem to mention where to put that ^^ I'm not that great at css so I'm pretty bad at knowing where to put things...

This would've seemed easier if you said where to put it or a simple 'anywhere'

[Former Member]

Go to your Admin panel

admin->themes>advanced_styles&&css->stylesheet

append the code above to the end of the stylesheet

[Mookie]

the ul, li, and a become red when I paste it anywhere for some reason

[Tumbleweed]

Oct 14, 2016 5:50:51 GMT -8 Mookie said:

the ul, li, and a become red when I paste it anywhere for some reason

NeonUnicorn, what _phil82 gave you should be o.k. despite the red flags but if you are like me and things like that drive you crazy, you can just use simple css put at the bottom of your style sheet. Up to you which to use.

#navigation-menu ul li a:link{
transition:.5s;
color:#ff0000!important;
}
#navigation-menu ul li a:visited{
color:#ff0000!important;
background-color:#ffffff!important;
}
#navigation-menu ul li a:hover{
color:#0000ff!important;
}

[Mookie]

you saved a life