[Resolved] Submenu auto width

Home Forums Support [Resolved] Submenu auto width

Home Forums Support Submenu auto width

  • This topic has 13 replies, 5 voices, and was last updated 5 years ago by Leo.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #343323
    Raul

    Hi!

    Is it posile to have a width of the menu drop down dynamically?

    By default I think there is a size of 200px, but I would like each dropdown to leave the items in a single line without having to put an exaggerated width.

    Thank you!

    #343440
    Leo
    Staff
    Customer Support

    Hi there,

    I don’t think that’s possible without some custom coding as it would need to go through all submenu items under each parent menu items to figure out which is the longest, set a width, then apply it to the rest of the submenu items.

    I believe that requires more than CSS.

    Will ask Tom to confirm πŸ™‚

    #343513
    Tom
    Lead Developer
    Lead Developer

    You could try something like this:

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

    Works perfect πŸ™‚

    Thank you Tom!

    #343829
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #387179
    colin ford

    Hi

    I am trying to increase the width of my main menu’s drop down (2 tiers) menu.

    I tried the above code and it did not work.

    Can you assist?

    Thanks,
    Colin

    #387186
    Leo
    Staff
    Customer Support
    #946938
    George

    I know this is an old one but when having a second level submenu, Tom’s and and Leo’s solution doesn’t work. When having a second level sub-menu, cascading sub-menu arrows appear behind the submenu text thus breaking the layout.

    Is there a fix for this?

    #947078
    George

    Oh well, adding .sub-menu li { margin-right: 2em; } seemed to work!

    .sub-menu .dropdown-menu-toggle {
        position: relative;
        right: 0;
    }
    
    .sub-menu li {
        margin-right: 2em;
    }
    
    .main-navigation ul ul {
        width: auto;
        white-space: nowrap;
    }

    Maybe you could check my solution and update the article above in case some users with more than 2 sub-menu levels find it useful.

    #947121
    Leo
    Staff
    Customer Support

    That CSS looks ok.

    Any chance you can link me to the page in question without the additional CSS added so I can see the original issue?

    #947185
    George

    Ehm, I am working locally from work now. Just fireup a clean WP install with GP free + premium and add a bunch of menus with a lost of submenu levels. Add 3 or 4, You will see the issue immediately.

    This is how it is without the added code:
    https://imgur.com/UeALeJm

    And this is how it is with the code included:
    https://imgur.com/50R7owp

    #947288
    Leo
    Staff
    Customer Support

    ok your code looks good to me.

    We will take a closer look and update the docs page later.

    Thanks πŸ™‚

    #947295
    George

    Yeah, sounds good, thanks for taking a look, Leo!

    #947322
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

    Thanks for bringing it up!

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