Navbar bootstrap getting behind the banner

Navigation
3

I'm putting navbar of Bootstrap on a website, but when I click the button to open the menu, the menu appears behind the banner you have on the site. I took the position:absolute that it has in col-md-12 and it was on top (in the correct way), but I wanted to know if there is another alternative, since I think taking position is not the right way to do it. p>

Print:

Mycode

<divclass="row-fluid bg-top">

  <div class="col-md-2">
      <img src="assets/images/logo.png" class="img-responsive" border="0">
  </div>

  <div class="col-md-3">

   <div class="navbar-header navbar-default navbar-inverse">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>

 <nav role="navigation" class="navbar">
  <div id="menu" class="collapse navbar-collapse">
    <ul>
      <li><a href="">a empresa</a></li>
      <li><a href="">máquinas</a></li>
      <li><a href="">insumos</a></li>
      <li><a href="">cápsulas</a></li>
      <li><a href="">soluções</a></li>
      <li><a href="">contato</a></li>
    </ul>
  </div>
</nav>

</div>
<div class="col-md-3">
</div>
<div class="col-md-4 hidden-xs hidden-sm">

  <div id="contatos">
      <p>[email protected]</p>
      <p>11 2356-6566 | 11 2356-6568 <img src="https://bmwkids.s3.amazonaws.com/app/uploads/2015/02/OrangePhone.png"style="width:8%"></p>

      <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="100" data-show-faces="false" data-share="false"></div>
      </div>

</div>

  </div>
    
asked by anonymous 12.05.2015 / 05:25

2 answers

1

Your code has some problems:

  • Your navbar does not appear, it is not declared correctly or you forgot to by the code, or you are missing: <div class"navbar navbar-inverse"> .
  • Remove the navbar-default and navbar-inverse classes from your div.navbar-header , these classes are used by navbar and not by navbar-brand.
  • You can make use of the navbar-static-top and navbar-fixed-top to assist in the top positioning of the same.
  • You do not need to use responsive classes within a navbar, bootstrap already does it yourself.

More information can be found on the navbar documentation on the Bootstrap website.

Below is a code for a navbar that works: 

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          			Dropdown <span class="caret"></span>
          		</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          			Dropdown <span class="caret"></span>
          		</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    
11.06.2015 / 21:10
0

Alisson, you should use the CSS element z-index to control the layers. If you can post your code in codepen.io and share it to see how it was done, it will be easier to help you.

    
12.05.2015 / 16:12
How can I change the appearance and behavior of the "Open" and "Cancel" buttons in JFileChooser? NetFramework dependencies in the project folder?