WordPress.org

Forums

Hueman
Mobile / Tablet Menu Collapsing (13 posts)

  1. dandanstimo
    Member
    Posted 1 year ago #

    Hi, is there a way to set the menu to collapse rather than show every item when viewing it from a mobile or tablet? Otherwise you end up with a very long list of items when looking at it from these devices. This way users could select subheadings to reveal the items below.

    Thanks in advance and thanks very much for a brilliant theme!

  2. Alexander Agnarson
    Member
    Theme Author

    Posted 1 year ago #

    Hi! Thank you :-)

    Normally this custom CSS should've worked:

    @media only screen and (max-width: 719px) {
    .nav ul { display: none!important; }
    .nav li:hover ul { display: block!important; }
    }

    However, since javascript needs to set height of the outer container in order to be able to smoothly animate the dynamic height of the dropdown, it kind of overflows the container I think. Give it a test and see if it does it on mobile.

  3. dandanstimo
    Member
    Posted 1 year ago #

    Hi Alex,

    Thanks for coming back to me. I have added that to my child theme stylesheet and it doesn't appear to have had any effect, positive or negative. Any ideas?

    Thanks

    Dan

  4. dandanstimo
    Member
    Posted 1 year ago #

    Oh, no it has worked but as you said the change then limits the overall size of the menu, so when expanded the other items go off of the edge of the screen sadly.

  5. alemarengo84
    Member
    Posted 10 months ago #

    Hi Alex.
    It seems to work fine except for the fact that, if there's a link related to a list element and one wants to open its submenu, browser touch/tap launches navigation to that link, so that submenus aren't visible but for a few.
    How may I fix this?
    Should I implement some touch js control?

    *** EDIT ***
    I tried many times to trick your css in order to make menu collapsible, but no way.
    Lastly, I was trying to follow this example. It seems to work well and it's only css.

  6. miroamarillo
    Member
    Posted 9 months ago #

    @alemarengo84: Did you implement this on your Hueman theme?? Does it work?? Please let me know as I'm looking for a solution too.

    It would be awesome if there's any way to do an off-canvas navigation for mobile devices.

  7. alemarengo84
    Member
    Posted 9 months ago #

    @miroamarillo Unfortunately, I didn't manage to make it work. :(
    As Alexander wrote, we should take in consideration to rethink/rewrite mobile menu code.
    I think it will be a great update for Hueman theme. Sorry!

  8. alemarengo84
    Member
    Posted 9 months ago #

    @miroamarillo: I'm trying to make this plugin work, at least for mobile version.

  9. dandanstimo
    Member
    Posted 9 months ago #

    Sadly I couldn't make it work without getting some odd behaviour. In the end I implemented a secondary menu to try and cut down the number of entries on the primary menu, which seems to have worked well.

  10. Brandon678
    Member
    Posted 5 months ago #

    Where exactly would i put this code in my CSS?

    @media only screen and (max-width: 719px) {
    .nav ul { display: none!important; }
    .nav li:hover ul { display: block!important; }
    }

  11. dandanstimo
    Member
    Posted 5 months ago #

    You need to go into the them editor and then paste it into a new line on the stylesheet.css

    For me it didn't produce the results that I'd hoped for, but this may work well for you.

    Good luck.

  12. raphaefeli
    Member
    Posted 4 months ago #

    Does anyone know if there's a solution to this? The menu is collapsed with the code above, but it hides behind the page content once you expand it. I'd really love if I could have a functional menu since i have lots of pages and don't want my users to scroll a lot.

  13. bdbrown
    Member
    Posted 4 months ago #

    @raphaefeli - Please don't post the same question in multiple threads. Since you started another topic you don't need to repost the question here. Thank you.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic