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

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

Home Forums Support Menu: Two line Item with different font sizes

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1152693
    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 <sup>Β©</sup> <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.

    #1152795
    David
    Staff
    Customer Support

    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;
    }
    #1153701
    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.

    #1153891
    David
    Staff
    Customer Support

    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.

    #1153963
    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.

    #1153969
    David
    Staff
    Customer Support

    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;
    }
    #1153986
    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)?

    #1154004
    David
    Staff
    Customer Support

    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.

    #1154029
    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

    #1154232
    David
    Staff
    Customer Support
    #1270354
    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;
    }

    #1270378
    David
    Staff
    Customer Support

    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;
        }
    }
    #1270490
    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)?

    #1270515
    David
    Staff
    Customer Support

    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

    #1270712
    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.

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.