3

Gente é o seguinte, eu estou usando o menu responsivo do bootstrap e eu precisava que ao clicar no icone do menu, aparecesse a lista ne empurrando as outras divs para baixo.... mas quando clico a lista esta aparecendo porem abaixo das outras divs.... vejam bem eu n qero qe ele sobreponha as outras divs.. eu qero qe ele empurra as outras para baixo abrindo espaço para ele... no caso é o container contendo a classe titulo que deve ser empurrado aqui os codigos html e css:

<nav  class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only"></span> 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
    <div class="container">
        <ul class="nav navbar-nav itens-menu">
            <li><a href="<?php echo $this->request->base; ?>/home">home</a></li>
            <li><a href="<?php echo $this->request->base; ?>/galeria">galeria de anúncios</a></li>
            <li><a href="<?php echo $this->request->base; ?>/faleconosco">fale conosco</a></li>
            <li class="botao-chat"><a class="active" href="">chat online</a></li>
        </ul>
        <div class="pesquisar-menu col-md-2 hidden-xs">
            <input type="text" placeholder="pesquisar"><i class="fa fa-search" aria-hidden="true"></i></input>
        </div>
    </div>
    </div>
</nav>  

<div class="container">
<div class="row">
    <div class="titulo col-md-12">
        <a href="">Ultimos anúncios</a>
    </div>
</div>

.navbar-default{
background-color: black;
margin-bottom: 0px;
border: none;
min-height: 70px;
top: -25px;

}

1 Resposta 1

1

Eu testei seu código, e está tendo o comportamento normal, alias, esse css informado seu está "escondendo" o menu do topo pra cima, ficando estranho, sugiro remover.

Para ilustrar, olhe funcionando:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="css/style.css">
	<style>
	</style>
</head>

<body>

	<nav  class="navbar navbar-default">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
			<span class="sr-only"></span> 
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span> 
		</button>
	</div>
	<div class="collapse navbar-collapse" id="navbar">
	<div class="container">
		<ul class="nav navbar-nav itens-menu">
			<li><a href="<?php echo $this->request->base; ?>/home">home</a></li>
			<li><a href="<?php echo $this->request->base; ?>/galeria">galeria de anúncios</a></li>
			<li><a href="<?php echo $this->request->base; ?>/faleconosco">fale conosco</a></li>
			<li class="botao-chat"><a class="active" href="">chat online</a></li>
		</ul>
		<div class="pesquisar-menu col-md-2 hidden-xs">
			<input type="text" placeholder="pesquisar"><i class="fa fa-search" aria-hidden="true"></i></input>
		</div>
	</div>
	</div>
</nav>  

<div class="container">
<div class="row">
	<div class="titulo col-md-12">
		<a href="">Ultimos anúncios</a>
	</div>
</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Se você testar esse código, do jeito que está, no mobile, verá que ele está arrastando o que tá pra baixo, da forma que você quer, e não está sobrepondo.

Como você não enviou todo o código, eu não consigo te falar com certeza qual o problema aí, mas como o meu código acima funciona, peço que use ele como base e tente corrigir o seu.

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 .