javascript - bootstrap navigation bar not working on mobile -

javascript - bootstrap navigation bar not working on mobile -

my bootstrap navigation bar not working in mobile platform. if open website navigation bar extends until block website contents. website live demo. moreover, website navigation bar color black 1 time open in mobile becomes grayness color. content not resizing actually. tried utilize bootstrap grid.

heres html code bootstrap grid:

<div class="container-fluid"> <ul class="sigs"> <li class="col-md-6 col-lg-2"> <button id="mypopover" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: lim teik han" data-content="scope & objective: appreciate theory, principle , application of internationally adopted business process improvement body of knowledge framework such scor(supply chain operation reference), cpfr(collaborative planning, forecast, , replenishment), bsc(balanced scorecard), lean 6 sigma, toc(theory of constraints), babok(business analysis body of knowledge).">business process</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover1" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: shamsul anuar abdul wahid" data-content="scope & objective: disseminate contemporary enterprise architecture(ea) body of knowledge, such togaf(the open grouping architecture framework), fea(federal enterprise architecture), zifa(zachman info framework architecture).">architecture</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover2" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: wong chow jeng" data-content="scope & objective: reinforce kind of advanced ict applied research exhibits high intent go commercialization , formulate strategies monetizing research works.">academics</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover3" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: kitt lee" data-content="scope & objective: contemporary programming languages, uml(unified modelling language), ux(user experience) , the-state-of-the-art software architectures.">programming</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover4" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: -tba-" data-content="scope & objective: kind of entertainment-oriented game development , competition.it includes cinema studio production.">game & simulation</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover5" class="btn btn-default" data-toggle="popover" data-placement="left" title="leader: -tba-" data-content="scope & objective: ">social media & online marketing</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover6" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: dr lim lian tze" data-content="scope & objective: ">data science & analytics</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover7" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: chen woon wee" data-content="scope & objective: ">business development</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover8" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: -tba-" data-content="scope & objective: ">mobile app</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover9" class="btn btn-default" data-toggle="popover" data-placement="left" title="leader: -tba-" data-content="scope & objective: disseminate contemporary technologies develop , deploy cloud computing solutions.">cloud computing</button> </li> <li class="col-md-6 col-lg-2"> <button id="mypopover10" class="btn btn-default" data-toggle="popover" data-placement="right" title="leader: chuah pei kern" data-content="scope & objective: propel comprehensive undestanding of equipment interface , embedded technology using arduino demonstration toolset.">arduino</button> </li> </ul> </div> <div class="container-fluid"> <ul> <li class="col-xs-3 col-md-4">agi-goldratt institute<br></li> <li class="col-xs-3 col-md-4">agile institute <br></li> <li class="col-xs-3 col-md-4">chartered institute of <br></li> <li class="col-xs-3 col-md-4">feac institute <br></li> <li class="col-xs-3 col-md-4">mesa international <br></li> <li class="col-xs-3 col-md-4">institute of business forecasting , planning <br></li> <li class="col-xs-3 col-md-4">international association contract , commercial management <br></li> <li class="col-xs-3 col-md-4">international institute of business analysis <br></li> <li class="col-xs-3 col-md-4">institute of business process management <br></li> <li class="col-xs-3 col-md-4">supply chain council <br></li> <li class="col-xs-3 col-md-4">the open grouping <br></li> </ul> </div>

you can collpase nav-bar little sizes , have drop downwards menu instead.this helps in presenting content on mobiles.

bootstrap has few built in classes help accomplish this. have button within header class.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">

the above html collapse menu toggle button mobiles.

have div id

<div class="collapse navbar-collapse" id="navbar-collapse-1">.... <!-- menu items mobile --> </div>

you can find documentation here -link

javascript jquery html css twitter-bootstrap