ketom ketom - 7 months ago 47
HTML Question

Bootstrap css fixed header no space

I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.

The Number 1 image is an example code. There is good.

Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)

enter image description here

Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laravel</title>

<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
font-family: 'Lato';
}

.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>

<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li><a href="http://test.dev/home">Home</a></li>
</ul>

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li><a href="http://test.dev/login">Login</a></li>
<li><a href="http://test.dev/register">Register</a></li>
</ul>
</div>
</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>

<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>

<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Answer

Maybe this solution wil be helpfull JSFIDLE

UPDATE: Smarties way will be to add new class with row div so your bootstrap css stay untouched.

.row-withmargin{
    margin-right: -15px;
    margin-left: -15px;
    padding-top: 70px;
}