html - navbar not visible in mobile display -


i have following navbar in site:-

<nav class="navbar navbar-default no-margin show">     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">         <ul class="nav navbar-nav">             <li class="active">                 <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>             </li>         </ul>         <div style="text-align: center; font-size: 20px; padding-top: 7px;">             <a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png"></a>             <p style="display: inline"><b>congress api</b></p>         </div>     </div> </nav> 

this navbar visible on medium screens laptop hidden in mobile displays. there white strip in mobile display. dont have css large devices should set css properties shown in mobile devices. toggle button not visible. pretty new @ this.

your entire navbar wrapped in collapse class supposed hidden in mobile display , toggled toggle button. since toggle button in collapse class being hidden in mobile widths. navbar structure should have .navbar-header class toggle button , logo should placed. links should placed in .collapse class button displayed in moblile widths , content can toggled. here example of how structure should look.

<div class="navbar navbar-default">   <div class="navbar-header">     <a class="navbar-brand" href="#">your logo</a>     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>     </button>   </div>   <div class="navbar-collapse collapse">     <ul class="nav navbar-nav navbar-right">       <li class="active"><a href="#">your links</a></li>       <li><a href="#">your links</a></li>       <li><a href="#">your links</a></li>     </ul>   </div> </div> 

Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -