Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcelocardoso

navbar transparent

Recommended Posts

galera...

to tentando deixar um navbar TRANSPARENT.

defino a classe :
- navbar {

background-color: transparent;

}

defino o meu navbar no bootstrap, mas mesmo assim ele não funciona.
outra:

1) se coloco a tag: navbar-fixed-top: ele posiciona meu nav no topo, certo:
porém, ele não desce a barra de rolagem com o conteúdo e fica com a classe TRANSPARENT;

2) mas se caso eu coloco ao invés de FIXED, para static, ele roda normalmente o conteúdo com a rolagem, mas por incrivel que pareça, não fica transparent a navbar, setada pela classe.

Alguém sabe como resolver isso, com exemplo para NAVBAR-STATIC-TOP????

Agradeço HELP.

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

meu código:

.navbar {
     background-color: rgba(0,0,0,0) !important;
     background: rgba(0,0,0,0) !important;
}

codigo bootstrap

    <div class="container-fluid">
        <div class="collapse" id="navbar-header">
            <div class="container-fluid" style="background-image: url('bootstrap/img/fundo_topo.png'); background-repeat: no-repeat;">
                <div class="row">
                    <div class="col-md-4 text-center pull-left" style="padding-top: 50px;">
                        <a href="index.html"><img src="bootstrap/img/logo.png" class="img-fluid"></a>
                    </div>
                    <div class="col-md-8">
                        <div class="pull-left">
                            <div class="text-center" style="padding-top: 50px;">
                                <h3 class="" style="color: black;">tema</h3>
                            </div>
                            <br>
                            <div>
<p> teste de comentario </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header"><span class="fa fa-bars"></span></button>
            <div class="btn-group pull-right" role="group">
                <button type="button" role="button" class="btn btn-secondary btn-sm"><span class="fa fa-key"> </span></button>
                <button type="button" role="button" class="btn btn-secondary btn-sm"><span class="fa fa-question-circle"> </span></button>
                <button type="button" role="button" class="btn btn-secondary btn-sm"><span class="fa fa-comment"> </span></button>
                <button type="button" role="button" class="btn btn-secondary btn-sm"><span class="fa fa-power-off" style="color: black;"> </span></button>
            </div>
        </div>
    </div>

fiz as suas tentativas e nada de funcionar...
como já disse, se coloco NAVBAR-FIXED-TOP, ele transparece, mas daí o conteúdo ao quebrar para conteúdo mobile, a barra de rolagem não desce.

Então preciso colocar transparência utilizando o NAVBAR-STATIC-TOP, que no caso seu eu coloco, ele funciona, a barra desce com o conteúdo todo, porém, o transparent da CLASSE, não aparece, UNDERSTAND????

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa Marcelo,

Entrei no fim de semana e esqueci de sair shauhusahushua, mas vamos a sua dúvida. Deixe-me ver se entendi:

  • Você tem uma navbar comum do bootstrap;
  • Você tem uma classe chamada navbar-static-top;
  • Você falou sobre scroll e etc...

Então você adiciona uma propriedade CSS para a navbar no Scroll? Foi isso que me pareceu até aqui.

Todas as propriedades CSS do Bootstrap podem ter um override utilizando o !important. Lembrando que você não precisa utilizar a propriedade background-color + background, já que a background consegue lidar com todos os elementos de plano de fundo, exemplo:

/* Só define a cor do fundo */
background-color: #FFF;

/* Ex.: Define uma imagem de fundo, se repete ou não, suas posições e cor de fundo */
background: url('imagem.jpg') no-repeat center center rgba(0,0,0,1);

Veja um exemplo disso aqui na DEMO.

Também é interessante dar uma lida nesse tópico: http://stackoverflow.com/questions/23020763/what-does-navbar-static-top-do-in-bootstrap-3 - Aqui ele aborda o uso correto do navbar-static-top (talvez isso ajude a resolver).

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por padrão o Bootstrap 3 insere um gradiente vertical cinza claro como imagem de fundo na barra de navegação.
Para fazer a barra transparente é necessário retirar a imagem de fundo além de definir a cor transparente como mostrado a seguir:

.navbar {
    background-color: transparent;
    background-image: none;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.