Моя навигационная панель не отображается вверху. Я использовал мой bootstrap - css файл и пользовательский файл s css. Я прилагаю скриншот.
Кроме того, я хотел бы знать, важен ли присутствующий здесь оверлейный элемент div.
Я хочу, чтобы он выглядел как this , и моя текущая страница выглядит так: это
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./CSS/style.css">
<title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
s css file
body{
background-color: #d460bb;
font-family: "Raleway",sans-serif;
}
.navbar{
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
background: rgba($color: #000000, $alpha: 0.2);
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1{
font-family: "Questrial",sans-serif;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
@media (max-width:768px){
.navbar{
background: #1f1f1f;
.nav-link:hover{
border-bottom: none;
}
}
// showcase
#showcase{
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Спасибо.