Para alcançar o efeito, você terá que usar
@media(max-width: 767px) {
e @media(min-width: 768px) {
para fazer os ajustes necessários.
Conforme o link navbar-fixed-top:
É necessário um espaçamento no body
O navbar fixo irá sobrepor os outros conteúdos, a não ser que você adcione padding
para o topo do <body>
. Dica: Por padrão navbar é de 50px
.
Adicione ao seu código
body { padding-top: 70px; }
Portanto isto é o que irá ajudar com o seu problema de sobreposição.
Acredito que você queira transformar o menu ao lado esquerdo em um navbar fixo no topo com um botão para fazer o "toggle".
Para isso crie o navbar, como no link: http://getbootstrap.com/components/#navbar-fixed-top deve ficar algo como (adicionei um atributo id
para evitar o efeito css pegar em outros "navbars", se existirem):
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
<div class="container-fluid navbar-collapse">
...
</div>
</div>
Crie o .content
aonde será o conteúdo da sua página:
Usando o @media
O min-width: 768px
seria o efeito para telas maiores, veja que no navbar limitei para 300px
e .content
eu apliquei margin-left: 300px
, você pode ajustar este dois conforme a necessidade.
No navbar-header
tinha um efeito de float
que quebrava a aparencia então eu removi (apenas telas maiores), o content
necessitará de uma margem a esquerda para o conteudo não ficar abaixo do "navbar".
@media (min-width: 768px) {
#navbar {
top: 0;
left: 0;
width: 300px;
height: 100%;
}
#navbar div.navbar-header {
float: none;
}
div.content {
margin-left: 300px;
}
}
Conforme o meu comentário no começo, precisamos adicionar body { padding-top: 70px; }
no navbar fixo, então iremos adicionar só quando o tamanho for menor que 768:
@media (max-width: 767px) {
body {
padding-top: 70px;
}
}
O resultado deve ser algo como:
@media (min-width: 768px) {
#navbar {
top: 0;
left: 0;
width: 300px;
height: 100%;
}
#navbar div.navbar-header {
float: none;
}
div.content {
margin-left: 300px;
}
}
@media (max-width: 767px) {
body {
padding-top: 70px;
}
}
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
<div class="container-fluid navbar-collapse">
<div class="navbar-header">
<button aria-expanded="false" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
<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 aria-expanded="false" class="navbar-collapse collapse" id="bs-example-navbar-collapse-6">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
1<br>2<br>3<br>4<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>