CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rudi Thiel
Rudi Thiel

Reputation: 2551

Bootstrap collapse navbar button works in landscape but not portrait mode

I made a bootstrap navbar that collapses for mobile devices. It works on my pc when shrinking the browser size and it works on screenfly. However, when I visit the site on my phone (iPhone 6S) the button only works when the phone is in landscape mode. I have no idea why this is happening. Any ideas why? Thanks

The navbar 

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="container">
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
    <div class="collapse navbar-collapse" id="navbarDiv">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about-us" >About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#pricing" >Pricing</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Upvotes: 1

Views: 866

Answers (1)

radbrawler
radbrawler

Reputation: 2695

By default bootstrap collapses at certain width which depends on bootstrap version, 768px in general.

What you can do is, add a css query.

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Change the value of max-width according to width of your phone's landscape mode. That should work.

Upvotes: 1

Related Questions