Prevent Bootstrap Oil

Asked

Viewed 703 times

4

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

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

How could I do so when using on smaller screens or even when resizing the browser, the search bar would not enter 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: Menu completo atualmete

Reduced menu:

Menu reduzido

My doubt is how to make the search bar stay visible in "collapsed mode"?

Is there any anti-collapse class in Bootstrap?

Thank you.

javascript css twitter-bootstrap
  • 1

    You want to put her next to My Company when you’re at Ollapse ?

  • 1

    something like this ? https://jsfiddle.net/filadown/uus86wxb/

  • Maybe it is more practical to make 2 menus: one for desktop and another for mobile. Then use rules @media to hide them according to screen size.

  • That’s right @Gabrielrodrigues, thank you very much. I will study this code and I will implement it there. Thank you very much.

  • @Juniorzancan since this is what you need I added the comment as an answer so that other people can know the possible solution

3 answers

3


I just added the search within the navbar-header and got a little misaligned the search of Brand, so I added @media to reconfigure the navbar on 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>
<!-- Latest compiled and minified CSS -->
<link rel="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 on jsfiddle

0

Initially I would use Javascript to do Collapse:

$('.collapse').collapse()

Inside a conditional, to check the screen size:

if (window.screen.width < 480) { // collapse }

-1

In fact you are using classes and attributes that encourage menu Collapse, for example: data-toggle="Collapse", class="navbar-toggle collapsed". Try removing these code snippets and test again. I hope this helps.

  • But that would be the case if I wanted to stop the whole Collapse, I need to stop only the search bar Collapse.

  • Sure, you could create 2 menus and use the bootstrap utility classes to manage the web and mobile version http://getbootstrap.com/css/#Responsive-Utilities

Browser other questions tagged javascript css twitter-bootstrap

You are not signed in. Login or sign up in order to post.