How to disable the Hamburger menu on mobile devices?

Hi,

I've tried searching for solutions online and using CSS Hero still need to get the hang of these, and there is a Chrome one that you guys use? need look into these more. anyways.. for now im looking to:

Disable the Hamburger menu on mobile devices and force it to use the regular desktop menu one. (i have used 5 images as the menu items and hidden the text descriptions for them) Looks like this on desktop - https://goo.gl/YwD5Ae
Mobile not pressed - http://www.tiikoni.com/tis/view/?id=89759b3
Mobile pressed - http://www.tiikoni.com/tis/view/?id=a8ab095
Mobile pressed need to hide/remove these with red arrows - http://www.tiikoni.com/tis/view/?id=0413b84
( Menu hamburger + the white file icon)

Domain - http://tinyurl.com/ounlhnf
Support Access is open

Please dont post any brand related information/ screenshots or domain links as i have had issues with google caching this information and linking it to their google searches of my site ... very bad for brand... please use temporary image upload / tiny url / pastebin etc to mask this information.

Thanks

Tom

  • Rupok

    Hi Tom, thanks for asking.

    I went to your site and saw the menu. But I'm a bit confused about your query. Please help me understand these clearly.

    At first, you said "Disable the Hamburger menu on mobile devices and force it to use the regular desktop menu one", I understand this. Then you said "Mobile pressed need to hide/remove these with red arrows" that makes me confused. If I work on your first query, then the total hamburger manu will be gone and regular desktop menu will be shown in mobile, how can I work on "mobile pressed" mode?

    To disable the Hamburger menu, I first need to know how this is working. Is it your theme feature or did you install any plugin for mobile hamburger menu? I tried to login with Support Access to check the issue but Support Access seems to be disabled. Can you please check again and grant us permission so we can try to resolve this faster?

    For removing the white file icon in front of all menu items in mobile pressed mode, you can use the following custom CSS code to remove that white icon from each menu item:

    .main-navigation ul li a::before {
      content: none !important;
    }

    Do you also want to hide the "Menu" box when clicked? Can you please confirm? I'll jump in again as soon as you confirm these details.

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Tom

    Hi Rupok,
    Thanks for your reply.
    1st) sorry about that i forgot to enable the support access. (its now enabled for the next 5 days)

    2nd) added your CSS for the the icon from menu - Worked perfectly thanks for that

    3rd) sorry may have phrased it a bit confusing... My end goal would be for the menu to look the same as it does currently on desktop devices to also look like on mobile devices where the 5 menu items appear horizontally and taking up much less of the screen as they do now vertically.

    So currently we have this - http://uploadpie.com/aCyh2 & http://uploadpie.com/d5iSu
    But want to get this - http://take.ms/gGpIf (ignore the lower part comments its from an older screenshot where the menu was working)

    Thanks
    Tom