GP mega menu – open 3rd level dropdown on mobile

  • Resolved Mr Lucky

    (@voodoochill)


    1 year, 1 month ago

    I have used the generatePress megamenu CSS as outlined here

    Building a simple megamenu

    I have made some minor changes only to font sizes, backgrounds and sizing

    It works very well, thank you for supplying the code.

    I have one question: on mobile view, in order to open the 3rd level dropdown you need to tap on the arrow to the right of the second level item. This works, but I would like it so that the dropdown activates when you tap on the send level item itself.

    This is mainly for usability because very often people don’t realise that in order to open a 3rd level they need to tap on the little arrow rather than on the 2nd level title

    Can anyone please help, thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi there,

    try this CSS:

    .main-navigation.toggled .menu-item-has-children a {
    position: relative;
    padding-right: 20px;
}
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
    position: absolute;
    inset: 0;
    text-align: right;
}
    Thread Starter Mr Lucky

    (@voodoochill)

    Thanks! Works like a charm.

    You’re welcome

    Thread Starter Mr Lucky

    (@voodoochill)

    One more thing…I was wondering if it is possible to do either of these:

    (1) After tapping the menu item which opens the drop-down, a second tap on that item then opens the page itself which that item is linked to

    OR

    (2)

    When tapping the Top level About item, it the dropdown shows both levels 2 and 3 (as it does with desktop menu)

    many thanks!

    Tricky one
    Try adding this to that CSS:

    .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle[aria-expanded="true"] {
    inset: 0 0 0 auto;
}

    the dropdown toggle has an aria-expanded attributed which is set to true when the menu is expanded. And here what we do is set the left hand inset to auto.
    This simply puts the button back to its regular size instead of covering the entire link.

    Thread Starter Mr Lucky

    (@voodoochill)

    Thank you that’s great!

    Do you know if there is also a way to get option (2), ie top level opens all levels below tab once?

    Thanks

    Thread Starter Mr Lucky

    (@voodoochill)

    It’s all working really well now! many thanks

    • This reply was modified 1 year, 1 month ago by Mr Lucky.

    Glad tp hear that.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘GP mega menu – open 3rd level dropdown on mobile’ is closed to new replies.