Reduce Menu Height

Hi Dave,

I took a quick look and can't seem to identify the issue either.

Can you remove your custom CSS one by one and see if you can pinpoint the issue that way?

There's actually only one piece of code right now:

.menu-with-subheading .subheading {
position: relative;
font-size: 12px;
top: -45px;
text-align: center;
}

I've just removed it, which fixes the white space problem at the bottom, but now the font size on the subheadings is too big, and the line spacing is way off.

Is there some other CSS I could use to fix that problem, without affecting the padding beneath?

Maybe try David's solution here?
https://generatepress.com/forums/topic/menu-two-line-item-with-different-font-sizes/#post-1152795

That almost worked, but pushed the first line of the subheading above the main heading somehow. Any idea how to get it below?

Hi there,

this is what i see:

https://www.screencast.com/t/4MTPQWqyKgW7

Should the larger text be below the smaller text ?

Funny, when I'm logged out of Wordpress I see what you see, but when I'm logged in I see it differently (screenshot URL attached).

Not sure what's causing that, but glad to see it's not forward-facing. But when logged out I still have the original issue: too much whitespace underneath the text. Any idea how to fix this?

That is weird... and if you asked me how to do that with that method i could not tell you. Is it just within the Customizer or when viewing a post ? If its just the customizer then it could just be a glitch. If its on the frontend then maybe some server caching is loading some older html CSS.

The weirdness from the screenshot I sent wasn't just in the customizer, it was visible when logged into Wordpress. I reverted back to the CSS I had been using before, which eliminated that issue.

But that puts me back at square one, looking for a way to remove the extra white space beneath the menu. If there's no fix for the way I've set it up, I wonder if there's a better way to set this up so I achieve the same look? Maybe create a sub-menu of some kind that permanent lives beneath the main menu items? (So main menu item would read "Services" and submenu item would read "See What We Can Do For You" in smaller font, but both link to the same place.)

What HTML did you add to the menu item label?

<center><h4>Services</h4><span class="subheading">See What We Can Do For You</span>

CSS Class: menu-with-subheading

CSS:
.menu-with-subheading .subheading {
position: relative;
font-size: 12px;
top: -45px;
text-align: center;
}

I would do this:

HTML - get rid of the <center> element its deprecated and may no longer be supported on modern browsers. So your HTML is just:

<h4>Services</h4><span class=”subheading”>See What We Can Do For You</span>

Then this CSS:

/* Columnise and center menu label */
.menu-with-subheading a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* reduce lineheight and bottom margin of heading and subheading */
.menu-with-subheading a * {
    line-height: 1;
    margin-bottom: 0.25em;
}

/** optional **/
.menu-with-subheading h4 {
    /* styles for h2 */
}

.menu-with-subheading span {
    /* styles for span */
}

Success! Thanks very much for your help.

You're welcome