Navbar collapse bootstrap does not push other div down

Question:

Here's the thing, I'm using the bootstrap responsive menu and I needed that when I click on the menu icon, the list would appear and push the other divs down…. but when I click the list it's showing but below the other divs …. you see I don't want it to overlap the other divs… I want it to push the others down to make room for it… in this case it's the container containing the title class that should be pushed here with the html codes and 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;

}

Answer:

I've tested your code, and it's having normal behavior, by the way, this css informed your is "hiding" the menu from top to top, getting weird, I suggest removing it.

To illustrate, look at it working:

<!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 type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
	<link type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<link 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>

If you test this code, as it is, on mobile, you'll see that it's dragging what's down the way you want it, and it's not overlapping.

Since you didn't send all the code, I can't tell you for sure what the problem is there, but as my code above works, I ask you to use it as a base and try to fix yours.

Scroll to Top