CSS Menu help

HTML & CSS
1

URL: http://tinyurl.com/22q6ols

I was wondering if someone could help me figure out how to allow for more than one line of text in the top right menu (Home, About Us, Resources, etc.). I actually need two lines of text for some of the items in the drop down. For example, under Meet Our Staff, I currently have Music Director, but really it needs to be Director of Music Ministries.

Thanks for any help!

2

That’s a messed up markup.

Since you have fixed height:20px; and line-height:20px; an easy solution is to target those <a>s that need to be taller.

Put “Director of Music Ministries” on the

<li class="menu-item menu-item-type-post_type menu-item-759" id="menu-item-759"><a href="http://wesleyanchapel.org/meet-our-staff/director-of-music-ministries/">[COLOR="Red"]Director of Music Ministries[/COLOR]</a></li>

and make CSS adjustments accordingly:

#menu-item-759.menu-item.menu-item-type-post_type.menu-item-759 a {
    height:40px;
}
3

Just so you know if you set fixed height px on elements with text, then you are basically screwed upon text resize…if you must set heights try to make it elastic with ems :slight_smile: