Nested sub menus on mobile

  • Hi,

    Great theme!

    Any way to have submenu items on the mobile view be nested (i.e. hidden), until the parent menu is clicked? With a longish menu (which includes some submenu items) it ends up being a long way to scroll, and you loose the sense of understanding the navigation system.

    Thanks,

    Pete

    example:
    https://www.lydiaspry.co.uk/site/ (check in Mobile view)

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

  • Hi Pete,

    I’m glad you enjoy the theme!

    Making the top menus clickable on mobile is fairly advanced. It would involve you creating a child theme and making use of JavaScript.

    Twenty Sixteen, the current default theme, has dropdown menus that are clickable on mobile and you could take a look at its code in functions.php to see how they achieved that functionality:

    https://github.com/WordPress/twentysixteen/blob/master/js/functions.js

    If you let me know your level of comfort when it comes to JavaScript and experimenting with different code, I’ll try to see how I can guide you further.

    Thread Starter peteaxford

    (@peteaxford)

    Hi Siobhan,

    Thanks for the reply and info.

    Yep, happy to dig around in some JS. I’ve used (preconfigured) Child themes before, but more than happy to have a go at creating one from starch, adding in some JS and then CSS’ing it into place…

    Where do we begin?! ??

    Cheers,
    Pete

    Hi Pete,

    The specific JavaScript needed to achieve what you’re after with this theme is advanced and goes beyond the type of support that this forum is intended for. I can give you some pointers for getting started if you’d like to experiment with solutions, though.

    As a starting point, you can open the /js/navigation.js file in your parent theme to see how Cerauno handles dropdown menus in your navigation on mobile by default.

    You can then compare this to the code for other themes that do have clickable dropdown menus on mobile. Twenty Fifteen and Twenty Sixteen are two examples of such themes and, as they’re default themes, these will be preinstalled in your setup of WordPress. You’re free to browse through the code for both of those themes.

    In terms of using JavaScript with your child theme, you can find guidance here:

    https://wordpress.stackexchange.com/questions/26822/how-to-override-javascript-files-in-child-theme

    If you’re not that comfortable with JavaScript, you could consider switching to a theme that has menus that behave in the way you like by default and using that as your parent theme instead.

    Let me know how you decide to go ahead.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nested sub menus on mobile’ is closed to new replies.