Outreach Pro: Change Height of Menu Items?

[FrankJohnson]

Friends:

How would I go about changing the height of individual sub-menu items on the primary navigation menu that is part of the Outreach Pro theme? In other words, one of these menu items:

Thanks in advance for any help anyone can offer - I really appreciate it.

Frank

[Pixel Frau]

You can assign a class to the individual sub-menu item. Then specify the padding for that class in the CSS.

Appearance > Menus > enter a class in the CSS classes field. If you don't see the CSS classes option, click Screen Options and tick the CSS Classes box.

Add something like this to your CSS:

.sub-menu a.custom-class {
padding: 14px 20px;
}

Replace 'custom-class' with whatever you typed in as the class for the sub-menu item. Increase/decrease the 14px to adjust the height.

[FrankJohnson]

Pixel Frau:

Thanks for your response. I went through the sub-menu items and assigned them all a class of "shorter". At first, when I used your css:

.sub-menu a.custom-class {
padding: 14px 20px;
}

it didn't work. When I looked at the source, I noticed that the class of "shorter" was being assigned to the list item rather than the link tag:

<li id="menu-item-56" class="shorter menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://www.agncn.org/who-we-are/">Who We Are</a></li>

so I changed the css to this:

.sub-menu <strong>li</strong>.custom-class {
padding: 14px 20px;
}

and the additional style did start to affect the sub menu items. But it doesn't look anywhere near what I expected:

Thanks again for your help - it's much appreciated.

Frank

[Pixel Frau]

In that case, try something like this:

.genesis-nav-menu .sub-menu .shorter a {
padding: 14px 20px;
}

It's helpful if you post a link to your website so that we can look at your actual code. 🙂

[FrankJohnson]

Thanks Pixel Frau. I'll try that.

Unfortunately, the site is private at the moment - and not available to the public. I hope to relaunch the site today, so if I can't get it to work, I'll launch it and then post the link.

Thanks again,

Frank

[Sridhar Katakam]

Just add the following in style.css:

.menu-primary .sub-menu a {
    padding: 24px 20px;
}

and adjust the first number to your liking.

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts