[Resolved] Right-arrowhead is wrapping on long menu items

Home Forums Support [Resolved] Right-arrowhead is wrapping on long menu items

Home Forums Support Right-arrowhead is wrapping on long menu items

  • This topic has 9 replies, 4 voices, and was last updated 3 months ago by Ying.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2220669
    Jim

    See the longer menu items, causing the > to wrap. Is there a length limit on text, or should it be making more space?

    image

    #2220686
    Leo
    Staff
    Customer Support

    Hi there,

    Try one of the solutions here:
    https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

    If this doesn’t work then please link us to the page in question πŸ™‚

    #2221052
    Jim

    Thank you. Using

    .main-navigation ul ul {
        width: auto;
        white-space: nowrap;
    }
    

    actually makes it look a bit worse. I actually prefer the text itself to wrap as before. Now it doesn’t, and the right edge of the menu background box is right at the edge of the last letter, and the arrow is still wrapping on longer items. I’d like to just prevent the arrow from dangling on a new line by itself, like a non-breaking space between it and the text.

    https://forestpathology.org

    #2221375
    David
    Staff
    Customer Support

    Hi there,

    keep what CSS you have so far and add this:

    .main-navigation .main-nav ul li.menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
    }
    nav ul ul .menu-item-has-children {
        float: none;
    }

    It should force the submenu to the width of the menu item and keep the toggle icon inline

    #2221545
    Jim

    Wow David, you are a CSS-fu master! I’ll spend half the day figuring out how that works.

    It no longer allows the text to wrap, but I’m okay with that. It’s a small price to pay to fix the rest of it. I should probably try for shorter menu text anyway.

    I notice that the spacing after a menu item now depends on whether it has a submenu. For example, the space after “Decline diseases” is less than space after the rest that have submenus. Is that to be expected?

    #2221554
    Ying
    Staff
    Customer Support

    Hi Jim,

    You have this CSS which causes the uneven padding.

    .menu-item-has-children ul .dropdown-menu-toggle {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: -10px;
    }

    As you have cache plugin on, I can’t tell where the CSS is from.

    Maybe check your custom CSS first?

    Let me know!

    #2221618
    Jim

    Funny, according to my dev tools, Ying, the CSS you quoted is coming from:
    wp-content/themes/generatepress/assets/css/main.min.css?ver=3.1.3

    I temporarily disabled page caching for the site, although the front page wasn’t cached anyway. I also disabled CSS concatenation/minification, which was probably preventing you seeing what was going on.

    #2221629
    Ying
    Staff
    Customer Support

    The CSS does come from GP πŸ™‚

    After adding David’s CSS, the structure changed, so the CSS adds extra bottom padding to menu item which has the arrow.

    Try add this CSS to remove the extra bottom padding:

    .menu-item-has-children ul .dropdown-menu-toggle {
        margin-bottom: -10px;
    }
    #2221674
    Jim

    That did the trick all right!

    I wonder if you guys would want this to be the stock styling of the menus. It seems to be an improvement (with my limited understanding).

    Thanks for all your help! You guys are brilliant at this stuff.

    #2221697
    Ying
    Staff
    Customer Support

    Thanks Jim πŸ™‚

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