Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] primary sub navigation width overlap

Home Forums Support primary sub navigation width overlap

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #470699
    drew

    In order to accomodate longer menu item labels, I found a thread here with the necessary CSS, which is in place:

    .sub-menu .dropdown-menu-toggle {
        position: absolute;
        right: 0;
    }
    .main-navigation ul ul {
        width: auto;
        white-space: nowrap;
    } 

    It’s mostly working great but there is some overlap between the longest label character count and the dropdown-menu-toggle arrow: https://www.screencast.com/t/uIvixVaHBSD

    This is another one I can’t quite figure out how to adjust so thanks for any insights!

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #470724
    Leo
    Staff
    Customer Support
    #470727
    drew

    The…

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

    …option? If so, yes, that’s what is in place already but I think I may be missing what you’re after.

    #470733
    Leo
    Staff
    Customer Support

    Can you try removing this part?

    .sub-menu .dropdown-menu-toggle {
        position: absolute;
        right: 0;
    }
    #470744
    drew

    No more overlap but it forces the arrow to line wrap and there doesn’t appear to be any right padding: https://www.screencast.com/t/fdqJRGMcRXJ7

    #470932
    drew

    My apologies, that was my bad; the media query was set to 1204 instead of 1024.

    However, after making the in that screencap, both the slide out menu and the mobile menu that drops down from the hamburger menu icon are present when it should just be the slideout menu (I thought).

    Here’s a screencast showing the issue better (and flipping to portrait layout to demonstrate the issue isn’t present there).

    Does that help?

    #471036
    Tom
    Lead Developer
    Lead Developer

    It may be best just to set a static width for the menu:

    .main-navigation ul ul {
        width: 300px;
    }

    The nowrap method doesn’t work great with the dropdown toggles I’m afraid – I’m looking into a solution for that.

    #471050
    drew

    Gotcha, that’s def better. I had to adjust the grandchild menus accordingly since some of those have even longer labels.

    .main-navigation ul ul ul {
        width: auto;
    } 

    I was using a mega menu (ubermenu from sevenspark) prior to sewitching this site over and the label lengths were moot. But I was having a lot of issues getting ubermenu to work so I decided to keep it simple and stick with the native nav.

    If you’ve ever run across their plugin before and know how to better integrate, I’d love to hear, otherwise, I have a ticket off to them to see if they have ideas.

    Thanks for taking the time to weigh on in a Sunday evening, I really appreciate it!

    #471100
    Tom
    Lead Developer
    Lead Developer
    #471406
    drew

    Very cool, do you know if it works in the right/left aligned layouts or just in full width above/below header layouts?

    I’ll certainly work with it but thanks in advance if you have any insights there.

    #471529
    Tom
    Lead Developer
    Lead Developer

    It’s best when using a full width menu. You can always use the navigation logo if you want to keep the menu full width but want a float right effect.

    #471611
    drew

    Many thanks, I did experiment with it and it’s very straightforward to implement. I actually ended up running into very similar issues with the longer labels. That combined with the amount of time to tweak the styling etc. and it’s probably something better suited for a large number of items with shorter labels.

    One thing I can say is if this were available as a premium plugin that provided customizer level styling controls (especially over padding/margins) as well as a way to implement on the actual menu admin panel without needing to use the CSS classes (that’s going to be beyond nearly all of my client skill levels), it would be a real winner!

    #471892
    Tom
    Lead Developer
    Lead Developer

    Will definitely keep that in mind!

    In my opinion, it’s best to keep menu item labels short and precise. There’s always exceptions of course 🙂

    #472311
    drew

    No argument there. The original mega menu layout was a tabbed configuration, which did a great job at containing all of the additional content (most of these menu items had longer descriptions too). Certainly nothing I would recommend as the norm but this was one of those exceptions to the rule.

    Nonetheless, it would be great to see more premium level addons over time so long as they fit into maintenance and support bandwidth 🙂

    Thanks so much for all the assistance!

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