navbar-Fixed-top bootstrap occupying every browser

Asked

Viewed 1,119 times

1

I divided the web page into 2 grid, getting left and right side, and I have a menu on the left side that by applying the navbar-fixed-top, he occupies both grid.

Can anyone help me? I want to get the menu fixed at the top but only at grid right without occupying every browser.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
    <!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container-fluid">
      <div class="row">

        <!-- ========== LADO ESQUERDO ========== -->
        <div class="col-md-4 estatico"><!-- lado esquedo da página -->
          <div class="novo">
            <p>lalal</p>
          </div>
        </div><!-- /lado esquedo da página -->

        <!-- ========= LADO DIREITO ========= -->
        <div class="col-md-8 conteudo"><!-- lado direito da página -->
          <div class="col-md-12"><!-- col Navegação -->
                <section id="navegacao">
                  <nav class="navbar navbar-fixed-top navbar-inverse navbar-transparente">
                    <div class="container-fluid">

                      <!-- header -->
                      <div class="navbar-header">
                        <!-- botao toggle -->
                        <button type="button" class="navbar-toggle collapsed"
                                data-toggle="collapse" data-target="#barra-navegacao">
                          <span class="sr-only">alternar navegação</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>

                        <a href="#">
                          <div class="logo">
                            <span class="img-logo"></span>
                          </div>
                        </a>

                      </div>

                      <!-- navbar -->
                      <div class="collapse navbar-collapse" id="barra-navegacao">
                        <ul class="nav navbar-nav navbar-right">
                          <li><a href="index.html">Menu1</a></li>
                          <li><a href="#">Menu1</a></li>
                          <li><a href="#">Menu1</a></li>
                          <li><a href="#">Menu1</a></li>
                          <li><a href="#">Menu1</a></li>
                        </ul>
                      </div>
                    </div><!-- /container-fluid -->
                  </nav><!-- /nav -->
                </section>
              </div><!-- / col Navegação -->

        </div><!-- /coluna lado direito da página -->

      </div><!-- row da pagina inteira -->
    </div><!-- /container-fluid -->

    <!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
html twitter-bootstrap menu

1 answer

1

Adds the following css:

.navbar-fixed-top {
    right: auto;
}

The navbar-fixed use the rules left: 0 and right: 0, causing the element to occupy the entire page, just change to the value auto. And move the nav to the left column.

  • the menu is in the same right column. Even worked more it gets cut does not take the whole right grid. I wonder if I could catch the whole right grid ?

  • In that case no, position: fixed is always relative to the browser window, you can try using the Affix

Browser other questions tagged html twitter-bootstrap menu

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