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 »

Hover color smaller than menu height


  #1  
Old Dec 6, 2010, 06:00 AM
Maartje
 
13 posts · Oct 2010
I wanted the page menu height to be more than the standard, so I used padding to increase it, through a trick I found here on the forum. However, now when I set a different hover color, the area that changes color is the same height as the menu would be without the padding. I tried adding the padding to the hover element itself (or whatever it's called), and decreasing margins, but that doesn't work. Colored border big enough to fill up the difference doesn't work either.

Any suggestions?

Screenshot: I'm using the juggledad's color menu cheat sheet, (although I've been fiddling with it so the colors aren't standard anymore) and you can see what I mean.
Attached Thumbnails
Click image for larger version

Name:	menuproblem.jpg
Views:	459
Size:	62.2 KB
ID:	938  
  #2  
Old Dec 6, 2010, 06:21 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Can you supply a url? If not can you post the code you are using for the menu?
__________________
~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 Dec 6, 2010, 07:26 AM
Maartje
 
13 posts · Oct 2010
URL: http://www.playyourwordsright.com

Code for the menu:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 38px;
margin-top:0px;
background-color: #262626;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
height: 38px;
background: green;
margin-top: 0px;
border: none 0px;

}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:active,
ul.rMenu li a:hover ,
ul.rMenu li {
background: yellow!important;
color: #000000 !important;
padding: 8px 5px;
margin-top: 1px;
}

ul.rMenu li a:active,
ul.rMenu li a:hover {
background: red!important;
padding: 8px 5px;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #4  
Old Dec 6, 2010, 05:55 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Try eliminating the height and just use padding on the following selector.
HTML Code:
div#menu1 a
__________________
~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.
  #5  
Old Dec 7, 2010, 08:45 AM
Maartje
 
13 posts · Oct 2010
Brilliant! That worked like a charm, as long as I keep the !important tags on some things.

I know it's generally considered good practice to make sure the code runs well without !important tags, but is that doable with Atahualpa?
  #6  
Old Dec 7, 2010, 10:24 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
It depends. Sometimes I just don't want to take the time to look for the code I need to change and other times there is a default setting I need to override. Generally I like to use IDs to minimize the need for !important but again sometimes I just want a quick fix.
__________________
~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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 08:08 AM
[SOLVED] Child menu hover color does not cover the width of the menu. tugi Page & Category Menu Bars 2 Aug 11, 2010 10:34 AM
[SOLVED] Background Color Hover and White/Black Arrow on Page Menu Bar do NOT appear liabelle Page & Category Menu Bars 1 Apr 28, 2010 08:00 AM
How to make Current page color different than Hover color? 25jai Page & Category Menu Bars 7 Jul 17, 2009 05:06 AM


All times are GMT -6. The time now is 08:17 PM.


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