Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Page Menu has CSS gradient but no hover state?


 
Prev Previous Post   Next Post Next
  #1  
Old Jun 26, 2013, 10:19 AM
rogemj23
 
18 posts · Nov 2010
Appleton, WI
Page Menu has CSS gradient but no hover state?

Please see this test site: http://testsite.marigoldyoga.com

I used Juggledad's colored menu cheat sheet as a starting point and have inserted a css gradient in place of a solid color. I separated the hover state to give it a different appearance, and then put the active state after that. I can't get it to work. Here's my code. Any ideas?

P.S. the gradient code is from a gradient generator I found online.

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
margin-top:0px;
/*background: blue; */
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
/*background: red;*/
border: none 0px;
width:100%;
height:40px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li {
/*background: yellow !important;
color: #000000 !important;*/
background: #522626; /* Old browsers */
background: -moz-linear-gradient(top, #522626 0%, #663434 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#522626), color-stop(100%,#663434)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #522626 0%,#663434 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #522626 0%,#663434 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #522626 0%,#663434 100%); /* IE10+ */
background: linear-gradient(to bottom, #522626 0%,#663434 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#522626', endColorstr='#663434',GradientType=0 ); /* IE6-9 */
text-align: center;
}

ur.rMenu li a:hover {
color:#522626 !important;
}

ul.rMenu li a:active {
background: #522626; /* Old browsers */
background: -moz-linear-gradient(top, #522626 0%, #663434 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#522626), color-stop(100%,#663434)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #522626 0%,#663434 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #522626 0%,#663434 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #522626 0%,#663434 100%); /* IE10+ */
background: linear-gradient(to bottom, #522626 0%,#663434 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#522626', endColorstr='#663434',GradientType=0 ); /* IE6-9 */
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div#menu1 ul.rMenu li a {
padding:0px;
height:40px;
width:138px;
border:none;
}

div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover, div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
line-height:2.5em;
}
 

Bookmarks

Tags
css, gradient background, hover, menu 1, page and category bar



Similar Threads
Thread Thread Starter Forum Replies Last Post
Different colors for hover and current state of menus tbaxter Page & Category Menu Bars 14 Oct 28, 2012 03:27 AM
working page menu bar with background image, image on hover, transparent link state cway Page & Category Menu Bars 1 Nov 1, 2011 03:06 PM
Background color does not change for menu items in current state cfibanez Page & Category Menu Bars 4 Sep 2, 2010 11:18 AM
Gradient in Page Menu Bar and Separation Bars clayphillips Page & Category Menu Bars 12 Feb 10, 2010 05:48 AM


All times are GMT -6. The time now is 07:18 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.