Navbar Collapse bootstrap does not push other div down

Asked

Viewed 876 times

3

Guys, here’s the thing, I’m using the responsive bootstrap menu and I needed to click on the icon on the menu, to show the list ne by pushing the other Ivs down.... but when I click the list this appearing below the other Divs.... see well I n qero qe it overlaps the other Divs.. i qero qe it pushes the others down making room for it... in case it is the container containing the title class that should be pushed here the html and css codes:

<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;

}

bootstrap div responsive collapse

1 answer

1

I tested your code, and is having normal behavior, alias, this css informed your is "hiding" the top menu up, getting weird, I suggest removing.

To illustrate, look at 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 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>

If you test this code, the way 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 basis and try to fix your.

Browser other questions tagged bootstrap div responsive collapse

You are not signed in. Login or sign up in order to post.