Bonjour,
Voila je rencontre un petit problème avec mon code J'ai une navbar qui fait 80px de haut... sauf que je voudrais qu'elle ce position au dessus du slider voir capture :
http://zupimages.net/viewer.php?id=16/33/kwr2.png (on voit la place que la nav dois avoir ainsi que le slider )
http://zupimages.net/viewer.php?id=16/33/o3df.png (Et la on voit la taille que la nav dois avoir)
Je penser à un position fixed sur la nav mais sa la deforme comme on peux voir sur la capture deux... Si vous avez des idées
Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Accueil - Greg Auto Services</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header id="header">
<div class="container">
<div class="topbarre row">
<div class="col-md-3">
Adresse :
</div>
<div class="col-md-3">
Adresse :
</div>
<div class="col-md-3">
Adresse :
</div>
<div class="col-md-3">
Adresse :
</div>
</div>
<div class="navbar row">
<div class="col-md-4">
<div class="brand">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="col-md-8">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</header>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://fakeimg.pl/1920x600/" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://fakeimg.pl/1920x600/" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://fakeimg.pl/1920x600/" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
header.scss
#header { height: 115px;border-bottom: 10px solid #1a1a1a; }
#header .topbarre { margin-top: 30px; }
#header .navbar { background: black;min-height: 80px; margin-top: 20px;margin-bottom: 0;position: fixed;}
#header .navbar .brand { float: left; }
#header .navbar .menu { float: right; }
#header .navbar .menu li { padding: 30px 20px 0; list-style: none; display: inline-block; }
#header .navbar .menu li a { text-decoration: none;color: #777777; }
#header .navbar .menu li a:hover { text-decoration: none;padding-top: 30px; border-top: 5px solid #FFFFFF;color: #FFFFFF; }