Navigation change button does not work for iPad

Question

Work everywhere except iPads, the viewing port also added:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Please help me find a solution, see my website .

This is how the result is viewed on the iPhone .

Here's how the result is viewed on the iPad .

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="top"> <div class="container topmenu"> <ul class="nav nav-pills pull-right" style="margin-top: -1px;"> <li role="presentation"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a> </li> <li role="presentation"><a href="#" data-toggle="modal" data-target="#registerModal">Register</a> </li> <li role="presentation"> <a href="https://www.facebook.com/pages/allvideolecturescom/320909451432640" class="soc"> <img src="http://allvideolectures.com/img/facebook_top.png" alt="" /> </a> </li> <li role="presentation"> <a href="https://twitter.com/videolecture" class="soc"> <img src="http://allvideolectures.com/img/twitter_top.png" alt="" /> </a> </li> <li role="presentation"> <a href="https:/google.com/+Allvideolectures" class="soc"> <img src="http://allvideolectures.com/img/google_top.png" alt="" /> </a> </li> </ul> </div> </div> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://allvideolectures.com/"> <img src="http://allvideolectures.com/img/logo.png" alt="all video lectures let learn" /><span class="logoleft">ALLVIDEO</span><span class="logoright">LECTURES.COM</span> </a> </div> <div id="navbar" class="navbar-collapse collapse mainmenu"> <ul class="nav navbar-nav pull-right"> <li role="presentation"><a href="http://allvideolectures.com/">Home</a> </li> <li role="presentation" class="active"><a href="http://allvideolectures.com/courses">Courses</a> </li> <li role="presentation"><a href="http://allvideolectures.com/blog">Blog</a> </li> <li role="presentation"><a href="http://allvideolectures.com/aboutus">About</a> </li> <li role="presentation"><a href="http://allvideolectures.com/contactus">Contact us</a> </li> <li role="presentation"> <form method="get" action="http://allvideolectures.com/search/"> <input type="text" name="search" class="form-control" required placeholder="Start Learning..."> <input type="submit" value="" class="searchbtn1"> </form> </li> </ul> </div> <!--/.navbar-collapse --> </nav> 

Answer 1

First you should read the documentation of the structure used:

Change the collapsed breakpoint of the mobile navigation bar

The navigation bar collapses to a vertical mobile view when the viewport is narrower than @grid-float-breakpoint , and expands to a horizontal nonmobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navigation bar collapses / expands. The default value is 768px (the smallest screen is "small" or "tablet").

Your code works well, but using the default variable value.

If you want to minimize navbar (and other components, perhaps, too) to 768px , you must override the variables.less file with a large value, for example with @ screen-md-min ( 992px ):

 @grid-float-breakpoint: @screen-md-min; 

For more information on overriding Bootstrap variables, see this question .