Menu: Two line Item with different font sizes

Hi there,

try this:

1. Add a CSS Class of menu-with-subheading to the menu item
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

2. This HTML for the label:

Heading<span class="subheading">subheading</span>

3. Add this CSS:

.menu-with-subheading {
    position: relative;
}
.menu-with-subheading .subheading {
    position: absolute;
    font-size: 12px;
    bottom: -1em;
    text-align: center;
    left: 0;
    right: 0;
}

Thx.
But that didn'work.
- i activated css-in in the screen option
- i copy pasted the text into label
- copy pasted css into css field

I don't think there is much i could have done wrong there.

It shows like a normal entry with the word "Headingsubheading" on a single line.

Can you link me to the site so i can see what is wrong?
You can edit your original topic and use the Site URL filed to share the link privately.

Entry post is edited.
The Menu entry is the one on the right.

As mentioned (and you hopefully can see) the logo is also misplaced since i try do achieve this.

Aah ok.

1. Enable the CSS Classes on Menu Items and in the field provided add only this:

menu-with-subheading

2. Is correct.

3. This CSS needs to be added to either the Customizer > Additional CSS or in your Child Theme style sheet:

.menu-with-subheading {
    position: relative;
}
.menu-with-subheading .subheading {
    position: absolute;
    font-size: 12px;
    bottom: -1em;
    text-align: center;
    left: 0;
    right: 0;
}

this works. Thx.

I used the additional css option - as i already have other code in there (local font, navigation opacity, hover effect).

Out of interest - could i add all these into child theme also?
Does it make a difference in form of speed or something else where i add the code(s)?

Additional CSS is fine if you're CSS is reasonably small - say less then 500 lines.
Performance wise - not going to notice much especially if your Cache is also combining the CSS files.

dont know what my cache does ;)
But i got 50 lines currently and i'm almost where i want to be. Maybe some hover effect on the menu or a change on the content link - but thats it.

guess i will be fine ;)

But i will play around with the style.css of child team just to give it a try.

anyway - solved. thx

Glad to be of help

Same topic - but a little extended question.

Is there a way to show the 2nd line / subheading only when hovering over the menu item? Couldn't find an answer myself.

But:
just in case anyone else is trying the same - i played around a bit with different options as my subheading was quite long and created some different version i wanted to share (no css knowledge at all - but it was a little try and error):

Option 1 - as mentioned above:
/*Menu - Two Lines, different Font size */

.menu-with-subheading {
position: relative;
}
.menu-with-subheading .subheading {
position: absolute;
font-size: 10px;
bottom: -2em;
text-align: center;
left: 0;
right: 0;
}

Option 2:
/*Menu - Three Lines - Small Top - Main- Small Bottom, different Font size */

.menu-with-topsubheading {
position: relative;
}
.menu-with-topsubheading .topheading {
position: absolute;
font-size: 10px;
bottom: 2em;
text-align: center;
left: 0;
right: 0;
}

.menu-with-topsubheading .subheading {
position: absolute;
font-size: 10px;
bottom: -2em;
text-align: center;
left: 0;
right: 0;
}

Option 3:
/*Menu - Three Lines Main- Small Bottom, Small Bottom, different Font size */

.menu-with-subsubheading {
position: relative;
}
.menu-with-subsubheading .subheading {
position: absolute;
font-size: 10px;
bottom: -2em;
text-align: center;
left: 0;
right: 0;
}

.menu-with-subsubheading .subsubheading {
position: absolute;
font-size: 10px;
bottom: -3em;
text-align: center;
left: 0;
right: 0;
}

Based upon the original CSS i provided try adding this:

@media (min-width: 769px) {
    .menu-with-subheading .subheading {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .menu-with-subheading:hover .subheading {
        opacity: 1;
    }
}

thx this works with a minor flaw.

My menu entry is 3 letters short - and the subheading consists of 2 words.
Therefore it seems to break the subheading.

I entered:
Menu
Sub+Sub

It shows as:
Sub+

Menu
Sub

It breaks up to a minumum of 6 characters as Menu Name - with a lower number it breaks.

Also while i am here ;) - on the off-canvas-panel i use for mobile ;) can i use a different subheading type for that somehow (meaning e.g. the hover option on desktop, the non-hover on mobile)?

I would need to see the site to diagnose that problem.
That last code is wrapped in a media query so the hover effect should only apply to desktop sizes.

If you can share a link ill take a look

i added my uploaded page to the first post. hope you can see that. The hover menu item is the 5th. As you can see i played around with the options i mentioned above.