|
// Unless you are using a Genesis theme, you will need to change the name of the class selector so it is using the same class names as your existing theme's style sheet' |
|
|
|
.genesis-nav-menu > .menu-item > a{ |
|
//Paste the CSS code generated by the background gradient generator website |
|
background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(239,239,239,1) 50%, rgba(204,204,204,0) 51%, rgba(204,204,204,0) 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(51%,rgba(204,204,204,0)), color-stop(100%,rgba(204,204,204,0))); /* Chrome,Safari4+ */ |
|
background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(204,204,204,0) 51%,rgba(204,204,204,0) 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(204,204,204,0) 51%,rgba(204,204,204,0) 100%); /* Opera 11.10+ */ |
|
background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(204,204,204,0) 51%,rgba(204,204,204,0) 100%); /* IE10+ */ |
|
background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(204,204,204,0) 51%,rgba(204,204,204,0) 100%); /* W3C */ |
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00cccccc',GradientType=0 ); /* IE6-9 */ |
|
background-size:1px 100px; // Set it to 1px wide as it repeats anyway, and to 100px tall. YOU MAY NEED TO CHANGE THE HEIGHT ACCORDING TO YOUR NEEDS. MAKE IT A BIT~ MORE THAN TWICE THE HEIGHT OF YOUR NAVBAR |
|
transition: background 0.2s ease; // Change this to 0.4s if you want the animation to run a bit slower |
|
} |
|
|
|
.genesis-nav-menu > .menu-item > a:hover{ |
|
background-position:0 -50px; // Experiment with this number, it should be half of the background-size value above |
|
color:#333; // Change the text colour if you need to |
|
transition: background 0.2s ease; // Repeat the transition rule here so it slides up and down |
|
} |
