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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


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 08:51 AM.


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