Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

How to vertically center-align one-line and two-line menu labels?


  #1  
Old Mar 11, 2013, 11:37 PM
steve955
 
11 posts · Nov 2010
New York
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? 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;
}

Last edited by steve955; Mar 29, 2013 at 06:47 PM.
  #2  
Old Mar 12, 2013, 04:22 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 12, 2013, 07:12 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #4  
Old Mar 12, 2013, 09:16 AM
steve955
 
11 posts · Nov 2010
New York
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!
  #5  
Old Mar 12, 2013, 10:05 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~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
menu label, page menu, vertical alignment

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Black Line Above/Below Header and White Line Before Body Mande Header configuration & styling 1 Sep 9, 2010 08:54 AM
How to separate line items in widget content with a line? mgofootball Sidebars & Widgets 5 Jul 19, 2009 08:36 PM
How to change dotted border line in the layout to solid line? araneum Atahualpa 3 Wordpress theme 1 Feb 21, 2009 06:40 PM


All times are GMT -6. The time now is 09:55 AM.


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