Navbar collapse bootstrap does not push other div down

Question

Navbar collapse bootstrap does not push other div down

Navigation

#1 by (0 votes)

2

People are as follows, I'm using the bootstrap responsive menu and I needed that when I clicked the menu icon, the list appeared and pushed the other divs down .... but when I click the list it is appearing below of the other divs .... see well I n qero qe it overlap the other divs .. I qero qe it pushes the others down making room for it ... in case it is the container containing the class title 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;

}

div bootstrap responsivo collapse

asked by anonymous 29.03.2017 / 15:46

1 answer

Row Logic - Python List of values in a session using NodeJS

score 0 · Answer 1

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

To illustrate, check it out:

<!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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

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

As you did not send all the code, I can not 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.