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

[David]

For the 5th item where there are 2 x spans – you can simply target them:

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

[Matthias]

i’m sorry – my bad. i meant the 6th entry – where you can see the hovereffect (if you hover). The one where you only see the single line if you dont hover.
In firefox the first word of the subheading flies way over the Menu entry

This is caused by the Menu entry length. If i change it to 6 or more letters it works – with less then 6 the first part of the subheading is positioned over the menu entry.

I edited the 3rd entry – which is the one we had first in this topic – basically the same just without the hover effect. There you can see what i mean also.

I tried to figure out playing with the span-command myself but could get it working.

[Matthias]

I also just found out:
It can be solved either by having a minimum of 6 letters (and i would like 3) or by changing

Layout -> Primary Navigation -> Menu Item Width
from (currently) 20 to 32.

So the theme does only seem to look at the width of the heading – and not the subheading if this is longer.

[Tom]

I think the issue here is coming from the line-height. You have the menu item height set to 150px in Customize > Layout > Primary Navigation. What happens if you decrease that value?

[Matthias]

its stays split – even at the minimum setting it is still not the same line (subheading is on top of the menu entry then).

[David]

Tom’s correct the <span> tag is inheriting the line-height of the menu item. Try changing this CSS:

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

for:

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

[Matthias]

that brought the subheading down – but they are still “separated” – meaning in two – not in one line.
after that Still the same behaviour: if my heading/menu-entry is 1-5 characters the subheading is broken into two lines – if it is 6+ it is in one line.

But this can be changed with the menu width – from 20 up and it doesn’t break anymore with 3 characters..

so far so good 😀 – with that another problem occured: the sticky navigation.
when i scroll down the subheading jumps on top of the heading.

But – again – this could be solved by playing around with the settings and code solutions (and the values in there like bottom) above a bit.

So: thx folks.

[David]

I am not seeing the issue with the Sticky Nav – but that will happen if the Sticky Navigations Menu Item height is smaller.

Keeping the subheadings as 2 lines requires the menu item to be wider – you can do that by increasing the menu spacing of the primary nav

[Author]

Posts