BootStrap

Front-end
#1

Galera sou fraquíssimo nisso de css… Então peço ajuda de vocês…

Tenho um código abaixo:

[code]



Components

        </div>
    </div>
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../" class="navbar-brand">Bootstrap</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="../getting-started">Getting started</a>
                    </li>
                    <li>
                        <a href="../css">CSS</a>
                    </li>
                    <li>
                        <a href="../components">Components</a>
                    </li>
                    <li>
                        <a href="../javascript">JavaScript</a>
                    </li>
                    <li>
                        <a href="../customize">Customize</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>[/code]

só que fica um sobreposto ao outro.

Podem me ajudar?

Estou usando o TwitterBootstrap.

Agradeço.

#2

Como assim sobreposto? Manda um print aí.

Twitter bootstrap é só seguir a estrutura e as class certinho que não tem erro, deve ter passado algum detalhe.

#3

a div com class bs-header fica escondida atrás desse menu " ".

Não entendi porque tmb, mas eu não sei muito de bootStrap.

#########Editado#########

Explicando melhor:

esse código:

[code]



Components

        </div>  
    </div>  [/code]

fica atrás desse aqui:

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="../" class="navbar-brand">Bootstrap</a> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">CSS</a> </li> <li> <a href="../components">Components</a> </li> <li> <a href="../javascript">JavaScript</a> </li> <li> <a href="../customize">Customize</a> </li> </ul> </nav> </div> </header>

Sacou?

#4

Então. Como você está usando assim:

A class navbar-fixed-top faz com que esta div, geralmente um menu, fique fixo no topo da página. Logo “fica em cima” daquela div anterior.
A div que você quer que fique mais abaixo use um padding-top, ou margin-top para a distanciar do topo.

Algo como:

#5

Conhece o Inspect dos browsers? Pra visualizar o código? A melhor forma é ver o código fonte dos exemplo e do próprio site do bootstrap.

Veja que essa class bs-header mesmo não faz parte do pacote do bootstrap. Para usá-la vc teria que colocar no seu próprio css.

No site oficial mesmo a class bs-header tem este código que entre outras coisas faz o distanciamento do menu do topo:

#6

eu peguei o exemplo do site mesmo, através do inspect.

Vou tentar explicar o que quero.

Quero aquele menu que o site mesmo usa, porém quero ele abaixo do uma div que tenha a logo e título do site, sacou??? quero que ele fique fixo quando rolar o site pra baixo, porém não quero que fique em cima da div do título, sacou???

#7

Tente algo assim:

        <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">  
                <div class="container">  
                    <div class="bs-header" id="content">  
                        <h2>SEU TÍTULO </h2>  
                    </div>  
                    <div class="navbar-header">  
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">  
                            <span class="sr-only">Toggle navigation</span>  
                            <span class="icon-bar"></span>  
                            <span class="icon-bar"></span>  
                            <span class="icon-bar"></span>  
                        </button>  
                        <a href="../" class="navbar-brand">Bootstrap</a>  
                    </div>
...
#8

Não rolou porque fica tudo dentro da faixa preta…
e queria que ficasse a logo no meio em cima e os menus embaixo em outra div…

#9

Cara você vai ter estudar um pouco de CSS. Ou, por enquanto, tente encontrar algum exemplo com Twitter Bootstrap que encaixe com o que você quer, dê um inspect e tente fazer igual.

Este site por exemplo tem vários temas, e existem outros similares. https://wrapbootstrap.com/

#10

dentro do div que está sendo sobreposto vc pode por o comando:

exemplo:

div {
	height: 50px;
	background-color: #69D2E7;
	
clear: both;
}
#11

mas esse clear: booth não vai apagar todas as formatações dele???

Eu fiz como o amigo falou, no menu eu coloquei um padding de 80px, aí deu certo, porém quando rolo o menu é fixo, aí quando rolo a tela ele fica muito abaixo…

#12