Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 27, 2014 at 12:43 am #309591
    allegrabillings

    Hey Guys,

    I don’t know if this has ever been addressed but this is something that bugs me greatly about the mobile hamburger nav slide out menu.

    website: http://www.jackandaddi.com
    Above is an image for reference to where I am talking about: the nav link client.

    In the wordpress back end this is set to no page content. So on full screen website when it is clicked nothing happens. Great. But on the mobile slide out nav when you click it, it highlights and closes the nav slider (like any other link) but then leaves you on the current page. I understand why this is happening of course. But for a user experience this is no good. for example someone new to your site would likely click on the parent page first and based on what they see happen think they went somewhere only to realize they didn’t and then get confused. Maybe even trying it once more. Before they then ether try the child page next or leave your site.

    the behavior that would be much better. Would be to make it so they weren’t clickable at all. I know there is two options were you can make child pages not show up on mobile and then when parents are clicked they reveal the children, this makes what I said not work of course. But if you have all pages displayed by default then it wouldn’t be a bother.

    Is there a way to make it so these aren’t clickable at all if we set the pages to # in the wordpress backend?This would be amazing
    thanks

    August 27, 2014 at 7:02 am #309673
    Ismael

    Hey allegrabillings!

    Thank you for using Enfold.

    You can add this on Quick CSS or custom.css to disable the Clients menu item on mobile navigation:

    @media only screen and (max-width: 767px) {
li#menu-item-1714 a {
pointer-events: none;
}
}

    Best regards,
    Ismael

    August 27, 2014 at 5:51 pm #309971
    allegrabillings

    Thanks Ismael,
    this did but also didn’t work. It did in fact disable clients, but it also disabled the child page links. ideas?

    August 28, 2014 at 5:45 am #310221
    Josue

    Hi!

    Add a greater than sign to alter direct children only:

    @media only screen and (max-width: 767px) {
li#menu-item-1714 > a {
pointer-events: none;
}
}

    Regards,
    Josue

    August 30, 2014 at 12:45 am #311119
    allegrabillings

    This last edit worked perfectly. thanks guys

    August 30, 2014 at 12:51 am #311121
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile hamburger nav glitch’ is closed to new replies.