Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] How to Control the Width of Current Menu Item (http://forum.bytesforall.com/showthread.php?t=14762)

ezaidins Jun 24, 2011 02:02 PM

[SOLVED] How to Control the Width of Current Menu Item
 
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;
}

lmilesw Jun 24, 2011 03:21 PM

For the spacing try using margins instead of padding.

ezaidins Jun 24, 2011 08:19 PM

Changing padding to margins didn't change anything. :-(

lmilesw Jun 24, 2011 09:00 PM

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;
}


ezaidins Jun 25, 2011 05:33 AM

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?

juggledad Jun 25, 2011 06:04 AM

the current item gets assigned a class of 'current_page_item' - you can use that in your css selector.

ezaidins Jun 29, 2011 11:33 AM

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;
}


All times are GMT -6. The time now is 06:40 AM.

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