javascript - Bootstrap Drop Down Menu Collapsing Before Link Can Be Clicked On Mobile Devices -

javascript - Bootstrap Drop Down Menu Collapsing Before Link Can Be Clicked On Mobile Devices -

this problem persist in screen width less 990

using startup framework built on bootstrap have drop downwards menu in navigation bar. works on desktop versions of site on mobile versions when drop downwards menu clicked drops shows links collapses again. makes impossible navigate website mobile device.

the link navbar here

this html navigation

<div class="collapse navbar-collapse pull-right"> <ul class="nav pull-left"> <?php $pages = array( "home" => "home", "about" => "about" ); $p = (isset($_get['p'])) ? $_get['p'] : ""; foreach ($pages $url => $label) { ?> <li><a <?= $p == $url ? 'class="active"' : ""?> href="index.php?p=<?=$url?>" > <?=$label?> </a></li> <?php } ?> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">services<b class="caret"></b></a> <span class="dropdown-arrow"></span> <ul class="dropdown-menu"> <li><a href="engineering.php">engineering</a></li> <li><a href="#">certification</a></li> <li><a href="#">manufacturing</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">contact<b class="caret"></b></a> <span class="dropdown-arrow"></span> <ul class="dropdown-menu"> <li><a href="contact.php">contact us</a></li> <li><a href="employees.php">employment</a></li> <li><a href="empportal.php">employee portal</a></li> <li><a href="cust.php">customer portal</a></li> </ul> </li> </div> </div> </div> </div>

i have moved drop downwards class a tag , wrapped drop downwards menu in separate div nil helps. other thing can think mess jsbut have no clue start?

is known issue bootstrap? or missing in code?

window.isretina = (function() { var root = ( typeof exports == 'undefined' ? window : exports); var mediaquery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)"; if (root.devicepixelratio > 1) homecoming true; if (root.matchmedia && root.matchmedia(mediaquery).matches) homecoming true; homecoming false; })(); window.startupkit = window.startupkit || {}; startupkit.hidecollapsemenu = function() { $('body > .navbar-collapse').css({ 'z-index': 1 }); $('html').removeclass('nav-visible'); settimeout(function() { $('body > .navbar-collapse').addclass('collapse'); $('body > .colapsed-menu').removeclass('show-menu'); }, 400) } $(function () { $('.page-wrapper, .navbar-fixed-top, .navbar-collapse a, .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) { if($('html').hasclass('nav-visible')) { settimeout(function(){ startupkit.hidecollapsemenu(); }, 200) } }); $(window).resize(function() { if($(window).width() > 965) { startupkit.hidecollapsemenu(); } }); var menucollapse = $('#header-dockbar > .colapsed-menu').clone(true); $('body').append(menucollapse); $('#open-close-menu').on('click', function () { if($('html').hasclass('nav-visible')) { startupkit.hidecollapsemenu(); } else { $('body > .colapsed-menu').addclass('show-menu'); if($('#header-dockbar').length) { $('body > .colapsed-menu').css({ top: $('#header-dockbar').height() }); } settimeout(function() { $('html').addclass('nav-visible'); }, 1) } }); });

ok after analyzing code there few things attracted attending

under screen size 1000 approx screen shifts , white space created you used body > .navbar-collapse .pull-right wrong pull right nav collapse not in it. your using page-transitions.js , swipebox.js not used

suggestions:

remove unwanted js not create unwanted conflicts. check .pull-right when called class is creating collapsing problem

edit: can tell me collapse function js is. not able find it, if know can help better

edit2: seek changing .navbar-collapse .navbar-collapse li:not(.dropdown)

$(function () { $('.page-wrapper, .navbar-fixed-top, .navbar-collapse li:not(.dropdown), .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) { if($('html').hasclass('nav-visible')) { settimeout(function(){ startupkit.hidecollapsemenu(); }, 200) } });

javascript jquery html css twitter-bootstrap