CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1353519
user1353519

Reputation: 71

How to show collapse menu in mobile only?

I have a bootstrap 3 collapse menu.

It looks like this in iphone:

screenshot

Here is the code:

<div class="navbar navbar-fixed-top visible-phone">
    <div class="navbar-inner">
        <div class="container">

            <!--Button to collapse the Navigation-->
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".nav-collapse">
                <img src="images/expand-menu-button.png"></a>
                <div class="nav-collapse collapse">
                    <ul class="nav nav-justified">
                        <li><a href="#">Velkommen</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="Personale"</a></li>

                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>

But I need to show normal menu in ipad and desktop. Now this menu button applying for ipad and desktop as well. How can I overcome that issue?

Upvotes: 2

Views: 8584

Answers (3)

cvrebert
cvrebert

Reputation: 9259

Possibly you're missing the viewport meta tag that's used to enable responsiveness, as mentioned in the Bootstrap docs?:

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

Upvotes: 0

Jordan.J.D
Jordan.J.D

Reputation: 8113

I believe the problem is in your navbar class. You are missing role="navigation" which makes the navbar accessible from different devices and sizes. You should not need the visible-phone either.

Change:

<div class="navbar navbar-fixed-top visible-phone">

To:

<div class="navbar navbar-fixed-top visible-phone" role="navigation">

Another problem may be fixed by changing:

<div class="nav-collapse collapse">

To:

<div class="collapse navbar-collapse">

Upvotes: 0

Tyler Petrochko
Tyler Petrochko

Reputation: 2641

Take a look at this, maybe it'll help. If you scale it in your desktop window it'll appropriately jump to mobile display when necessary.

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        Welcome
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </div>
</nav>

Upvotes: 1

Related Questions