2

Eu fiz um layout com um sidebar fixa, já está tudo ok, porém o que não está funcionando e quando vou usar em versão mobile (telas com resolução menor que 768px).

Preciso que quando fica em um resolução menor que 768px (Mobile) o menu fique em cima e o conteúdo em baixo.

Meu codigo é o seguinte:

html, body {
	height: 100%;
}
.container-fluid {
	height: 100%;
}



.sidebar-menu {
	height: 100%;
	background: #424c56;
	background-size: 100%;
	background-repeat: no-repeat;
	position: fixed
}
.content-wrapper {
	background: #090;
	float: right;
}
 @media(max-width:768px) {
	 
	 html, body {
	height: 0;
}
	 
	 .container-fluid {
	height: 0;
}
	 .content-wrapper {
	float: none;
}
	.sidebar-menu {
	height: 0;
	background: #424c56;
	position:static;
}
	
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid" style="margin:0; padding:0;">
  <aside class="col-md-3 col-sm-3 col-xs-12 sidebar-menu">ada
    <nav>
      <ul>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
      </ul>
    </nav>
  </aside>
  <section class="col-md-9 col-sm-9 col-xs-12 content-wrapper">This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.

Make sure to keep all page content within the #page-content-wrapper.</section>
</div>

utilizando esse codigo, pois em resoluções maiores para tablet e desktop ele está perfeito! Creio que seja alguma mudança no css que não estou conseguindo fazer!

6
  • 1
    Não precisava excluir a pergunta original e refazê-la. Bastava ter editado a outra. Foi muito dificil encontrar o seu perfil e para saber o que tinha acontecido.
    – Reptile
    5/02/2015 às 20:59
  • Engraçado Luiz, me desculpe a sinceridade, mas na sua outra questão eu editei ela pra você, movi os código, ajustei os exemplos, coloque as tags certas na questão, ae você deleta a questão e ainda abre uma nova usando a tag errada e colocando um titulo parecido com o antigo. Faz o SEGUINTE, move o código do BootPly para o Snippet do StackOverflow (edite a sua questão para isto), links externos futuramente podem deixar de funcionar, o que tornaria a pergunta inválida para possíveis respostas (assim como eu fiz na edição da sua outra pergunta).
    – Reptile
    5/02/2015 às 21:06
  • @GuilhermeNascimento desculpa, estava meio perdido nesse site, mais creio que já me achei! Esse meu código está funcionando da maneira que quero para desktop e tablet, só não está funcionando para mobile! só preciso ajustar ele para mobile! 6/02/2015 às 0:17
  • Eu já havia entendido desde a outra questão, o problema é que eu evito de responder algo que não está claro logo na pergunta pq senão é como se eu respondesse algo que não foi perguntado :) amanhã de manhã se ninguém tiver respondido eu respondo, pq agora eu to no celular, fica difícil, boa noite cara
    – Reptile
    6/02/2015 às 0:20
  • @GuilhermeNascimento só tenho a lhe agradecer! Obrigado! Boa noite! Ficarei esperando sua resposta! 6/02/2015 às 1:14

1 Resposta 1

2

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .