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.

Answer 1

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>