[Resolved] Menu: Two line Item with different font sizes

[Matthias]

hi there,

i wanted to create a menu entry that has two lines – one that looks like the other menu entries – but with a second line in a smaller font right beneath. Kind of a title + subtitle menu item.

So far I tried this as Navigation Label:
Normal Font Menu Entry ^© <br /> Second + Line smaller font Menu Entry

But it breaks the menu: The logo gets misplaced (i use navigation as header – it gets back into header with this entry), there is a huge gap between the two lines – overall not working it seems.

Is it possible to do what i have in mind? It seems in general – but my tries didn’t work so far.

[David]

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;
}

[Matthias]

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.

[David]

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.

[Matthias]

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.

[David]

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;
}

[Matthias]

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)?

[David]

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.

[Matthias]

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

[David]

Glad to be of help

[Matthias]

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;
}

[David]

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;
    }
}

[Matthias]

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)?

[David]

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

[Matthias]

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.

[Author]

Posts