navbar-fixed-top bootstrap occupying entire browser

1

I've split the webpage into 2 grid , getting right and left side, and I have a menu on the left side that, when applying navbar-fixed-top , it occupies both grid .

Can anyone help me? I want to make the menu fixed at the top but only in the 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><scriptsrc="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><!--Incluitodosospluginscompilados(abaixo),ouincluaarquivosseparadadossenecessário--><scriptsrc="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
    
asked by anonymous 28.10.2017 / 00:40

1 answer

1

Adds the following css:

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

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

    
28.10.2017 / 01:51