Navigation collapse button not working for iPad

Question

Working everywhere else except iPads, view port also added:

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

Please help me find a solution, see my website.

Here is how the result is viewed on iPhone.

Here is how the result is viewed on 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's 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>

thanks for edit @Tasos – allvideolectures Jun 06 '15 at 18:32 — allvideolectures, Jun 06 '15 at 18:32
What result do you want to achieve? – sergdenisov Jun 06 '15 at 19:47 — sergdenisov, Jun 06 '15 at 19:47
same as iphone @SergeyDenisov – allvideolectures Jun 06 '15 at 20:30 — allvideolectures, Jun 06 '15 at 20:30
http://mobt.me/BK8T as here – allvideolectures Jun 06 '15 at 20:32 — allvideolectures, Jun 06 '15 at 20:32
yes trying to implement – allvideolectures Jun 09 '15 at 20:48 — allvideolectures, Jun 09 '15 at 20:48

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

First you should read documentation of the framework you're using:

Changing the collapsed mobile navbar breakpoint

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

Your code works well, but using default variable value.

If you want collapsed navbar (and other components maybe too) on 768px, you should override your variables.less file with a larger value, for example with @screen-md-min (992px):

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

For more information about Bootstrap variables overriding see this question.

Navigation collapse button not working for iPad

1 Answers1