0
J'ai une image de bannière qui utilise la position: relative; à l'intérieur d'une enveloppe avec position: relative; J'ai ajouté un Bootstrap navbar-static-top. Mon but était de faire en sorte que la barre de navigation repose sur l'image de la bannière. Jusqu'à présent, j'ai essayé de changer la position de certains éléments et malgré tous mes efforts, je me retrouve avec un espace blanc entre la barre de navigation et l'image de la bannière. Je crois que cela a quelque chose à voir avec l'une des classes de navigation que j'utilise mais je ne suis pas sûr de laquelle. Voici le code HTML5 et CSS3 pertinent.Bootstrap positionnement absolu de la barre de navigation ne sera pas au-dessus de l'image de la bannière relativement positionnée
.wrapper {
\t position: relative;
\t padding: 0 15px;
}
#banner {
\t height: 50vh;
\t width: 100vw;
\t position: relative;
}
#responsive-nav {
\t background-color: transparent;
\t position: absolute;
\t z-index: 2;
\t
}
#logo {
\t position: absolute;
\t top: 15px;
\t left: 60px;
\t z-index: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
\t <div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#about">Home</a>
</li>
<li class="nav-item">
<a href="#work">Projects</a>
</li>
<li class="nav-item">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Ne est-il un peu ce désapprouvée à utiliser ! Important? –
Il y avait une certaine discordance dans la fermeture des tags, c'est pourquoi il ne sélectionnait pas les changements sans utiliser! Important. J'ai mis à jour votre code dans l'extrait ci-dessus. Si votre css est chargé avant le fichier bootstrap css, le style de votre fichier style.css remplacera le style d'amorçage. – jass