Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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?


  #1  
Old Jun 26, 2013, 10:19 AM
rogemj23
 
18 posts · Nov 2010
Appleton, WI
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;
}
  #2  
Old Jun 26, 2013, 11:30 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Remember the "active" state is when the mouse button is held down on a link, NOT the active page.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jun 26, 2013, 03:26 PM
rogemj23
 
18 posts · Nov 2010
Appleton, WI
Thank you for your response. I am aware that active is when the link is being clicked. How does that relate to getting the hover style to work? I don't see a connection between your comment and my question.

I put the active style after the hover style because I had learned that the links styling always goes in that order: link, visited, hover, active. I thought having the active style grouped with link and visited might be preventing the hover style from working. I've actually tried it both ways, and neither get the hover style to work, so I'm still not sure what's going on.
  #4  
Old Jun 26, 2013, 03:48 PM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
So somthing is getting in the way. Try taking out each piece of css you added one at a time and see if there is any effect, then put in and take out the next bit.
  #5  
Old Jun 26, 2013, 04:19 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Have you tried putting !important in all the gradient lines? I have had to do that on some sites.

The only reason I mentioned the active state is many get that mixed up with current. I very seldom use it. I usually use just a and a:hover
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Jun 26, 2013, 09:08 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Take another look at your hover CSS selector.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Jun 29, 2013, 10:24 AM
rogemj23
 
18 posts · Nov 2010
Appleton, WI
I ended up swapping the gradient CSS for a gradient image. I still haven't been able to get the hover style to work, even with the image, so I decided to just change the text color on hover instead. If I get the background gradient image to swap on hover I'll let you guys know. Thanks for taking the time to look at it!
  #8  
Old Jun 29, 2013, 10:36 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Take another look at your hover CSS. It is incorrect unless that is a typo.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

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 03:44 PM.


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