• Closed
  • steven wilson
    Spectator
    October 9, 2014 at 5:12 am #13202

    this is a little hard to explain but here

    http://www.lifeinthecityaustin.org

    I have 5 drop down menus (plus a home link). I have deleted the # from each top-level menu item so that rolling over a top level menu item with a mouse will trigger the drop down but that top level menu item isn’t clickable. however, on mobile, those top level menu items (with child) ARE tappable, and result in an error message saying that page doesn’t exist. tapping on a top level menu item in mobile results in this page:

    http://www.lifeinthecityaustin.org/staff/who%20we%20are%20%E2%96%BE

    the mobile menu should preserve the lack of a link from the desktop version. I could edit the php file (removing the href statement) for the mobile menu if you tell me where it is. however, I noticed in the CSS that there is no differentiation between top level and child menu items (like there is in the desktop CSS) so I don’t even know if I could remove ONLY the href statement on a ‘with child’ menu item.

    this is frustrating and I can’t imagine I’m the only one who dislikes this mobile behavior since this is a responsive theme. I did a search on here but didn’t find a reference to this topic previously.

    Alok Maheshwari
    Spectator
    Posts: 303
    October 10, 2014 at 7:14 am #13212

    Putting a “#” on a menu link which isn’t supposed to be a link is a standard practice and I would suggest that you retain that. Moreover the menu is dynamically generated so you cannot edit it easily.

    What we can do is apply a css so that the mouse pointer changes so that it doesn’t look clickable. You need to apply a class called nonclickable to the top menu items. You may need to enable “CSS Classes” in the “Screen Options” visible at the top right on admin section for the option to appear.  After that you need to add the following style in custom css.

     

    .nonclickable a
    {

    cursor: default;
    }
    .nonclickable ul a
    {

    cursor: pointer;
    }

    steven wilson
    Spectator
    Posts: 22
    October 10, 2014 at 7:20 am #13213

    thanks for the reply. the problem with using # (which I know well and which I’ve used many times) is that the link is actually still clickable. I want the top level with-child links to be completely NOT clickable yet still trigger the drop down on mouse over in the desktop view. this does work when I create the menu item and then go back and edit it and remove the #.

    I also know about changing the cursor using CSS, but this does not apply on mobile where there is no cursor. this was my original question.

    If I use a # as the link for the top level menu item with child, will that convert into a non-tappable menu item on mobile?