Back to the top
Ticket #9281 in : Resolved

Mobile Menu Problem

  • Alex Rosas

    Hello, I noticed a mobile menu issue: On my phone, I cannot click on the some of the menu tabs. The tabs that contain a submenu are not clickable. For example, when you view my site http://autoimmunityisnotinvisible.com on the mobile, you cannot click on \”Our Stories\” or \”Ai Diseases\” ..Nothing happens when I click those parent tabs. Only the submenu is clickable. Please help.

    Thank You,

    Alex

    Posted 3 years ago
  • denis ushakov

    It’s the way they programmed it. Since mobile doesn’t support hover, the parent link upon the click becomes just a button that shows submenu items rather than being an actual link as it is in desktop view. I haven’t tackled that problem yet, but there’s two solutions that I have thought of: 1. adding the page (like Our Stories) as submenu -> renaming it something like “View Our Stories” -> hiding it with CSS on desktop view; 2. jQuery your way out by writing a script that takes you to the “Our Stories” page upon second click.

    I’m leaning towards first option myself. If you need code sample let me know, I’ll post it when I get it done

    Posted 3 years ago
  • user-1260 Laur Ghe Staff

    Hi Alex,

    Thank you for the patience.

    Denis have right. This is the present menu behavior. The parent click is used for submenu expansion.

    I am sorry for any inconvenience.

    Posted 3 years ago
  • denis ushakov

    In options check what menu breakpoint is set to, in my case it’s 1140px

    than target .sub-menu to make sub items visible at all the time

    after #navbar-mobile is set to overflow hidden, but change it to overflow-y: scroll, that will insure that entire menu is accessible via scrolling if you have a lot of sub menu items.

     

    Example:

    @media screen and (max-width: 1140px) {
    .sub-menu {
    display: block !important;
    }
    #navbar-mobile {
    overflow-y: scroll !important;
    }
    }

    Posted 2 years ago