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 »

[SOLVED] How to Control the Width of Current Menu Item


  #1  
Old Jun 24, 2011, 02:02 PM
ezaidins
 
27 posts · Aug 2010
site: http://www.mindyhermann.com I'm temporarily displaying the site (rather than showing the "down for maintenance" page.

How can I get the current menu item to be the same width as the hover item? I've been trying for hours and I'm admitting defeat.

Probably inelegant, but my custom CSS is below. What am I missing?

Thanks in advance for the assistance!

/* Menu Bar */
div#menu1 ul.rMenu {
background: #333366;
height: 23px;
padding: 10px 5px 0px 0px;
}

div#menu1 ul.rMenu li {
margin: 0 0px;
}

/* Spacing between Menu Items */
#rmenu2 li {
padding:0px 10px 0px;
}

/* Hover colors */
div#menu1 ul.rMenu li a:hover {
background: #666699;
color: #ffffff;
}
  #2  
Old Jun 24, 2011, 03:21 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
For the spacing try using margins instead of padding.
__________________
~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 24, 2011, 08:19 PM
ezaidins
 
27 posts · Aug 2010
Changing padding to margins didn't change anything. :-(
  #4  
Old Jun 24, 2011, 09:00 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Sorry... I didn't mean to say just change all the paddings to margins. I just meant that you needed to use margins instead of paddings for the separation and tweak as necessary.

Currently your CSS looks like this.

HTML Code:
/* Menu Bar */
div#menu1 ul.rMenu {
	background: #333366;
	height: 23px;
	padding: 10px 5px 0px 0px;
	}

div#menu1 ul.rMenu li {
	margin: 0 0px;
}

/* Spacing between Menu Items */
#rmenu2 li {padding:0px 10px 0px; }

/* Hover colors */
div#menu1 ul.rMenu li a:hover { 
	background: #666699;
	color: #ffffff;
}
Instead try the following as a starting point

HTML Code:
/* Menu Bar */
div#menu1 ul.rMenu {
	background: #333366;
	height: 23px;
	padding: 10px 5px 0px 0px;
	}

/* Spacing between Menu Items */
#rmenu2 li {
margin:0px 10px 0px 10px !important;
}
__________________
~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 Jun 25, 2011, 05:33 AM
ezaidins
 
27 posts · Aug 2010
I implemented your suggestion and the hover item is now the same width (5px wide right and left margin) as the current item, but I was looking for the other way around.

Is there a way to control the width of the current item? In other words, when Home is selected, the current (or selected item) (background: #ffffff) has 5px wide right and left margin and the hover item (background: #666699) has 15px wide right and left margin. How do I give the current (or selected item) (background: #ffffff) the same 15px wide right and left margin?
  #6  
Old Jun 25, 2011, 06:04 AM
juggledad's Avatar
juggledad
 
23,631 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the current item gets assigned a class of 'current_page_item' - you can use that in your css selector.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jun 29, 2011, 11:33 AM
ezaidins
 
27 posts · Aug 2010
In case anybody cares, the following is my solution:

/* Menu Bar */

div#menu1 {
float:left;
width:100%;
height: 23px;
background:#333366;
border-top: 10px solid #333366;
overflow:hidden;

}
div#menu1 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:0%;
text-align:left;
}
div#menu1 ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:0%;
}
div#menu1 ul li a {
display:block;
margin:0 0 0 1px;
padding:5px 15px !important;
background:#333366;
color:#000;
text-decoration:none;
line-height:1.3em;
}
div#menu1 ul.rMenu li a:hover {
background:#666699;
color:#fff;
}
div#menu1 ul li a.active,
div#menu1 ul li a.active:hover {
color:#333366;
background:#fff;
font-weight:normal;
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Multiple current-menu-item tags on home page sawyerjw Atahualpa 3 Wordpress theme 5 May 5, 2011 04:13 PM
Sub-category menu item width incamedia Page & Category Menu Bars 1 Mar 23, 2011 11:55 AM
[SOLVED] change current category menu item text color cway Page & Category Menu Bars 3 Oct 29, 2010 08:39 AM
Page menu (pages-widget): Current page item in post unelma Sidebars & Widgets 5 Jun 7, 2010 03:11 PM
[SOLVED] Change Current Menu Item's Background to Transparent rnimchuk Header configuration & styling 2 Sep 15, 2009 05:12 AM


All times are GMT -6. The time now is 02:23 AM.


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