Dyad 2 – Displaying submenus on mobile

  • Unknown's avatar
    axelyeti · Member ·

    Hello everyone.
    I’m using the Dyad theme and there’s something I’d like to change. When the screen’s width goes under 960px, the whole menu is hidden and I need to click on it to expand all the menu items.
    The problem is, it also expands all the submenus. As I have a lot of submenus, I’d like them to be hidden unless clicking a second time on them to expand them. I see there is the “aria-expanded” which change from “false” to “true” for the primary menu. Would there be a way to implement this tool for submenus as well ?
    Thanks in advance for your help.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hey there @axelyeti, these forums are for the sites hosted here at .com, and since our service here is pretty different from the free software, the community is different too. You’ll likely get better results at the correct forums for self-managed installations, at https://wordpress.org/support/forums/

    Dyad is one of our themes, though, so I’ll answer what I can: honestly you’d need a custom child theme and likely a developer to get things to work the way you’re proposing, and it still might not be a great mobile experience. Particularly if any of the sub-menus are long enough to scroll off the screen. You’d have top touch the phone to scroll, but touching it could also click through to a menu item. Can you see how that would be tricky?

    As it stands, people can click on one of your main topics and see all items in that list. So frankly I’d just recommend hiding the submenus on mobile with something like this:

    @media only screen and (max-width: 960px) {
  ul#primary-menu li ul {
      display: none;
  }
}

    And then use a more complex menu in the footer if you’d like. I’d imagine most mobile users will be either searching for something specific, or landing on a specific article already and more interested in browsing related topics, rather than browsing the entire site for a topic. Just a guess though. :)

    Anyway. Going forward, the correct forum for Dyad on WordPress.org is here:
    https://wordpress.org/support/theme/dyad/

    Our staff will likely answer you there, but other community members may have some other ideas that could work for you too.

    Hoping that helps!

  • Unknown's avatar
    axelyeti · Member ·

    Thanks for your answer.
    Hiding submenus is a solution indeed, a bit radical though.
    Anyway, it does the job for the moment and I’ll seek more help on the correct forum.
    Thanks again !

  • The topic ‘Dyad 2 – Displaying submenus on mobile’ is closed to new replies.