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)
-   -   How to vertically center-align one-line and two-line menu labels? (http://forum.bytesforall.com/showthread.php?t=19871)

steve955 Mar 11, 2013 11:37 PM

How to vertically center-align one-line and two-line menu labels?
 
I encountered a situation for top page menu in Atahualpa:

The top page menu has six menu items (each has own drop-down menu). Of the six menu labels, two are very long and I have to break them into two lines. Now all the labels are vertically top-aligned, is there a way to make them center-aligned using HTML/CSS inserts?:confused: Need expert's help! sandbox site: http:---------------

We tried many approaches without success, current HTML/CSS inserts:

/* ======================= */
/* top level menu items */
/* ======================= */
div#menu1 ul.rMenu-hor li.rMenu-expand a,
div#menu1 ul.rMenu li a,
div#menu1 ul.rMenu li.rMenu-expand a {
background: none;
height: 55px;
line-height: 16px;
padding: 0;
margin: 0;
}

div#menu1 ul.rMenu li.rMenu-expand li a,
div#menu1 ul.rMenu li.rMenu-expand li li a,
div#menu1 ul.rMenu li.rMenu-expand li li li a {
height: auto;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a span,
div#menu1 ul.rMenu li a span,
div#menu1 ul.rMenu li.rMenu-expand a span {
padding: 10px 24px 8px 11px !important;
margin: 0;
display: block;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a { padding: 0 !important; }

div#menu1 ul.rMenu li.current_page_item,
div#menu1 ul.rMenu li.current_page_item a,
div#menu1 ul.rMenu li.current-menu-item,
div#menu1 ul.rMenu li.current-menu-item a,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active,
div#menu1 ul.rMenu li:hover a,
div#menu1 ul.rMenu li.current-menu-parent,
div#menu1 ul.rMenu li.current-menu-parent a {
color: #fff;
}

div#menu1 ul.rMenu li li {
background: #fefef6;
}

/* ======================= */
/* second level menu items */
/* ======================= */

div#menu1 ul.rMenu li ul.rMenu-ver li a {
color: #3a3a3a;
background: #ececec;
font-size: 13px;
padding: 0;
text-align: left;
height: auto;
}

div#menu1 ul.rMenu li.rMenu-expand li a span,
div#menu1 ul.rMenu li.rMenu-expand li li a span,
div#menu1 ul.rMenu li.rMenu-expand li li li a span {
padding: 11px 4px 10px 12px !important;
}

/* second level menu hover */
div#menu1 ul.rMenu li ul.rMenu-ver li a:hover {
color: #fff;
background: #959595;
}

/* second level current item */
div#menu1 ul.rMenu li ul.rMenu-ver li.current_page_item a,
div#menu1 ul.rMenu li ul.rMenu ver li.current-menu-item a {
color: #fff;
background: #959595;
}

div#menu1 ul.rMenu li.current_page_item ul.rMenu-ver li a:hover,
div#menu1 ul.rMenu li.current-menu-item ul.rMenu-ver li a:hover {
color: #fff;
background: none;
}

juggledad Mar 12, 2013 04:22 AM

try adding this
HTML Code:

div#menu1 ul.rMenu {
    background: none repeat scroll 0 0 #505050;
    border-color: #505050;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 75px;
}


lmilesw Mar 12, 2013 07:12 AM

I read your question a couple of times and if you are asking how to vertically center the menu items this code may work.
HTML Code:

#menu-item-44, #menu-item-85, #menu-item-83 {
    top: 9px;
}
#rmenu2 {
    overflow: hidden;
}

The overflow line is so that the bottom of the repositioned item doesn't show. You could alternatively give each of the single line menu items a class in the Appearance > Menus and then just use that class instead of the three IDs.

steve955 Mar 12, 2013 09:16 AM

Thank you so much juggledad and lmilesw for your fast reply!!
Yeh, it's not easy to describe the issue with my language, sorry.

lmilesw guessed it right, and the method worked, but the [overflow: hidden;] is making the drop-down disappear. Any possible fix? thanks again!

lmilesw Mar 12, 2013 10:05 AM

Oops... didn't check that. Just take that hidden line out. The issue you get is some display issues on the bottom of the double line menu items. I fiddled a bit and didn't come up with a quick solution though.


All times are GMT -6. The time now is 12:14 AM.

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