How to stop the menu from hiding when tapping anywhere on the page on tablet

Question

I am using an bootstrap menu. It is visible on hovering. I made it on tablet possible to open on tap. Now the menu is too long for the screen, so you have to scroll down to see the other menu items. But when you tap the page to scroll down, the menu is disappearing...

Something like this is happening on tablet:

How to disable the hide on tap on tablet only?

You can see it on: http://lumenis.bondtest.nl/test-inner-menu

Thanks in advance!

Edit 1: Share some code

<nav class="navbar navbar-default lumenisInnerMenu" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        </div>
        <div class="collapse navbar-collapse lumenisListItems">
            <ul class="nav navbar-nav">
                [*>NODE]
            </ul>
        </div>
    </div>
</nav>

[>NODE]
    <li class="[?SELECTED]dir current[/?][?NODE] dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]">
    [?ENABLED]
        <a class="[?NODE] dropdown-toggle[/?]" data-url=[=URL] [?!NODE] href="[=URL]" [/?] [?NODE] data-toggle="dropdown" [/?]>
                <div class="textsubitem">
                    <span>[=TEXT]</span>
                </div>
        </a>
    [?ELSE]
        <a href="#" [?NODE] [/?]> [?NODE]
            <span>[=TEXT]</span>[/?]
        </a>
    [/?]
    [?NODE]
        <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
            [*>NODE]
        </ul>
    [/?]
    </li>
[/>]

I am using DDRmenu on DNN.

Please share some code or make a demo fiddle. This way its difficult to debug on your website. — nashcheez, Mar 15 '17 at 12:58

score 0 · Answer 1 · answered Mar 15 '17 at 13:03

You can do it with bootstrap easily as done for "About-us" menu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav navbar-nav nav_menu">
                    <li><a href="/">Home</a></li>
                    <li class="dropdown">

                        <!-- Split button -->
                        <div class="btn-group actv">
                            <a id="aboutUsDes" href="/about-us" class="actv">About Us</a>
                            <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/about-us/board">Board</a></li>
                                <li><a href="/about-us/our-people">Our People</a></li>
                            </ul>
                        </div>
                </ul>

The menu is still closing when tapping else where on the page? — Danny Brouwer, Mar 15 '17 at 13:29
yes exactly this is the solution for responsive design, Like in tablet or mobile if you will tap on toggle button your list will open, and if you tap on "About-Us" menu then About us page will display. I have done this following site you can review http://woweb-dev.azurewebsites.net/ — Ammar Ahmed, Mar 15 '17 at 13:48
If this is resolving your issue, Then please vote me up Thanks :) — Ammar Ahmed, Mar 15 '17 at 13:50
I do not think that you fully understand me. I do not want the menu to close when you tap elsewhere on the page. The menu is too long to see so you have to scroll down to see the rest of the items. But when you try to scroll down, you tap the page, which causes the menu to close. — Danny Brouwer, Mar 16 '17 at 08:33
Then you need to split your list of items into two columns.That may be a better approach, You also can do it with bootstrap — Ammar Ahmed, Mar 16 '17 at 11:17

How to stop the menu from hiding when tapping anywhere on the page on tablet

1 Answers1