[Resolved] Nav bar hover animation edit?

[chris]

Im trying to change the Navigation hover effect, and the CSS im trying to use from cssdeck as following doesnt seem to want to work, not sure what im missing.. if others wish to add different navigation hover this could be useful thread

.main-navigation ul li a:hover {
color: #91640F;
}
.main-navigation ul li a:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: ‘.’;
color: transparent;
background: #F1C40F;
visibility: none;
opacity: 0;
z-index: -1;
}
.main-navigation ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}

/* Keyframes */
@-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}

[David]

Hi there,

first off you would need to set the Customizer > Colors > Primary Navigation background to transparent.

Then try this CSS:

.main-navigation .main-nav ul li a:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-height: 1px;
    height: 100%;
    content: '.';
    color: transparent;
    background: #F1C40F;
    visibility: none;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease-in;
}

.main-navigation .main-nav ul li:hover a:after {
    opacity: 1;
    visibility: visible;
    max-height: 100%;
}

[chris]

That works to animate when mouse leaving the nav bar, any way to make it do the same when entering hover?

Sorry to be a pain, understandable if this isnt theme support area.

[David]

I am still seeing a background hover color applied in Customizer > Colors > Primary Navigation – that needs to set to transparent for the effect to be seen.

[chris]

Duh silly me, sorry.. Thank you!

[David]

Glad to be of help.

[Author]

Posts