CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
Michele
Michele

Reputation: 681

Bootstrap: Collapse nav at 768 px of screen size

I'm using bootstrap but sadly the nav items collapse only for smartphones, how can I make it collapse for tablets in portrait mode? (768px)

My nav item:

<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <a class="navbar-brand" href="#"><img src="images/logo.png" width="383" height="150" alt="Logo" /></a>
            <li class="active"><a href="#home">Accueil</a></li>
            <li><a href="#service">Le Service</a></li>
            <li><a href="#portfolio">Notre r&Eacute;seau</a></li>
            <li><a href="#about">Qui sommes nous?</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <form id="login">
                    <li><input class="form_login" type="text" id="email" placeholder="e-mail" /></li>
                    <li><input class="form_login" type="password" id="password" placeholder="mot de passe" /></li>
                    <li><button class="form_login" id="submit" value="submit">Submit</button></li>
                </form>
                <li><a href="#" style="color: white;">Mot de passe oublié?</a></li>
                <li><a href="#" style="color: white;">Créer un compte</a></li>
                <li><a href="#"><span class="icon-facebook"></span></a></li>
                <li><a href="#"><span class="twitter-square"></span></a></li>
                <li><a href="#"><span class="google-plus"></span></a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Upvotes: 1

Views: 2662

Answers (1)

thenetimp
thenetimp

Reputation: 9820

It's based on pixels. What you need to do is use a media query to detect the point at which you want the nav to collapse, and then find the class that collapses it and copy it into the media query. This guy explains it well and has a link to sample code for 3.1

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

Upvotes: 1

Related Questions