CODEWITHSUNDEEP
twitter-bootstrap-3
iScrE4m
iScrE4m

Reputation: 882

Bootstrap 3 nav-collapse start collapsed only on mobile

There are a lot of questions surrounding collapsing navbar, but I can't find this specific case, sorry if it's a duplicate anyway.

<div class="navbar navbar-static-top navbar-default container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">Brand</a>
  </div>
    <div class="nav-collapse" id="navbar">

I am trying to have my navbar start collapsed on mobile (on page load). I found it works that way when I add class="collapse" to the #navbar div, but then on PC my navbar is hidden, unless I go to small resolution and toggle it.

Also in this implementation, the first click on collapse button "reopens" opened navbar on mobile.

Upvotes: 1

Views: 1014

Answers (1)

Steven B.
Steven B.

Reputation: 9372

Your issue is with: 

<div class="nav-collapse" id="navbar">
    <ul class="nav navbar-nav">

It should be navbar-collapse:

<div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav">

Upvotes: 2

Related Questions