[Resolved] Align navigation with bottom of logo in menu

[Amanda]

I searched forum for an answer to this, but didn’t find it. I’m sure this is simple.

I have a logo 80px tall in Menu Plus menu logo spot. My navigation is set to full width and the size of type is 16px. I’d like the text of the menu to align to the bottom of the logo. Right now it seems to be floating roughly in the middle.

Any easy way to fix that? Wondering if I’m just not seeing where the setting is or if I need to add some css to correct it.

Excellent theme, btw.

[Tom]

Hi there,

By default it’s supposed to vertically centered, which would be considered normal I guess (like the sticky nav on this site).

So you’re wanting your menu items to sit on the bottom of the sticky navigation basically?

Let me know 🙂

[bdbrown]

Hi Amanda. Can you post a link to your site? Would help if we could see your layout with the navigation spacing. Thank you.

[Amanda]

Yes, Tom, that’s exactly it. My logo has a sort of baseline, so the menu looks funny floating in the middle.

Sorry I haven’t made the site public yet, so I can’t show it.

[bdbrown]

Assuming you have the default navigation layout, give this css a try:

/* align navigation logo and menu bottom */
.main-navigation .main-nav ul li a {
  line-height: 28px;
  padding-top: 32px
}
.sf-menu > .menu-item-has-children > a:first-child:after,
.sf-menu > .page_item_has_children > a:first-child:after {
    margin-top: 13px !important;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Amanda]

Thanks! I messed with the line height and padding and got it right.
I was sort of expecting that some kind of “vertical-align” would be the answer.

[bdbrown]

You’re welcome. Glad to help.

[Author]

Posts