Andrés Alagna Andrés Alagna - 6 months ago 198
HTML Question

How can I stop my bootstrap sandwich menu from pushing my content down?

When you click the toggle menu, it pushes down my div. I have tried some works around like

position: absolute
but it messes up my menu. Making it
fixed
solves the problem of my menu being pushed down, but I don't want my menu to be fixed on the page that way.



html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}

.logo {
height: 74px;
padding-left: 10px;
}

section {
background-image: url("tumblr_mngppzG5MX1r9wqk4o3_1280.png");
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

a {
text-decoration: none;
color: red
}

.navbar {
min-height: 100px;
border: none;
}
.navbar-nav {
float: right;
margin: 0;
padding-top: 29px;
}

.navbar-default {
background-color: rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav>.active>a
{
background-color: transparent;
color: #CBCCCE;
}

.navbar-default .navbar-nav>.active>a:hover {
color: white;
background-color: transparent !important;
font-size: 1.7em !important;
}

.navbar-default .navbar-nav>.active>a.cool-link::after {
content: '';
display: block;
width: 0;
height: 3px;
background: #286090;
transition: width .3s;
}

.navbar-default .navbar-nav>.active>.cool-link:hover::after {
color: white;
width: 100%;
transition: width .3s;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus {
background-color: transparent;
color: white;
}

.navbar-default .navbar-nav>li>a {
color: #CBCCCE;
font-size: 1.6em;
}

.navbar-default .navbar-nav>li>a:hover {
color: white;
background-color: transparent !important;
font-size: 1.7em !important;
transition: width 1s;
}

.navbar-default .navbar-nav>li>a.cool-link::after {
content: '';
display: block;
width: 0;
height: 3px;
background: #286090;
transition: width .3s;
}

.navbar-default .navbar-nav>li>a.cool-link:hover::after {
color: white;
width: 100%;
transition: width .3s;
}


@media only screen and (max-width: 780px) {
.logo {
height: 50px;
}

.navbar {
min-height: 80px;
border: none;
}

.navbar-default .navbar-nav>li>a {
font-size: 1em;
}

.navbar-default .navbar-nav>li>a:hover {
font-size: 1.1em !important;
}

.navbar-default .navbar-nav>.active>a:hover {
font-size: 1.1em !important;
}

}

.navbar-collapse {
box-shadow: none !important;
border:none !important;
}

.navbar-default .navbar-collapse {
border: none !important;
}

.jumbotron {
width: 50%;
margin: auto;
}

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://www.festsolutions.com/wp-content/uploads/2016/05/stylesheet.css">
<head>
<title></title>
</head>

<body>
<section>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img class="logo" src="http://www.festsolutions.com/wp-content/uploads/2016/05/Untitled-2-300x97.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" navbar-right>
<li class="active"><a href="#" class="cool-link">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#" class="cool-link">Portafolio</a></li>
<li><a href="#" class=cool-link>About</a></li>
<li><a href="#" class=cool-link>Contact</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

</section>
</body>
</html>




Answer

Add position: fixed; width: 100%; to <nav>, it should fix your issue

Comments