Prevent Bootstrap collapse

Navigation
4

I'm using Bootstrap on my site and I'm making a bar with navbar.

The menu consists of a brand, 3 "li" items, a search bar and a link.

How could I do that by using smaller screens or even resizing the browser, the search bar would not go into this "collapse"?

Current code: 

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Minha Empresa</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
      
        <input type="text" id="OmniSearch" class="form-control" placeholder="Buscar..." />
       
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="navbar-link">Entrar / Cadastro</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Current full menu:

Reducedmenu:

My question is how to make the search bar visible in collapsed mode?

Is there any anti-collapse class in Bootstrap?

Thank you.

    
asked by anonymous 11.02.2016 / 01:27

3 answers

2

I just added search inside navbar-header and got a little misaligned the search of the brand, so I added @media to reconfigure navbar in mobile.

Example: 

@media(max-width:767px) {
  .navbar .navbar-form {
    width: 185px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media(min-width:768px) {
  .navbar .navbar-form {
    width: 250px;
  }
}
.navbar .navbar-form {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand hidden-xs" href="#" title="Desktop">Minha Empresa</a>
      <a class="navbar-brand visible-xs" href="#" title="Mobile">Minha Empresa</a>
      <form class="navbar-form pull-left" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search">
          <div class="input-group-btn">
            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>
            </button>
          </div>
        </div>
      </form>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Item 1</a>
        </li>
        <li><a href="#about">Item 2</a>
        </li>
        <li><a href="#contact">Item 3</a>
        </li>
        <li><a href="#" class="navbar-link">Entrar / Cadastro</a>
        </li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
</div>

See working at jsfiddle

    
11.02.2016 / 04:20
0

Initially I would use JavaScript to do the collapse: 

$('.collapse').collapse()

Within a conditional, to check the size of the screen: 

if (window.screen.width < 480) { // collapse }
    
27.04.2016 / 05:28
-1

In fact you are using classes and attributes that encourage collapse of the menu, for example: data-toggle="collapse", class="navbar-toggle collapsed". Try removing these snippets of code and testing again. Hope this helps.

    
11.02.2016 / 01:55
Generate pdf in java Catch the image of a WordPress post from an external file