почему панель навигации не идет сверху? - PullRequest
0 голосов
/ 23 марта 2020

Моя навигационная панель не отображается вверху. Я использовал мой 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;
    }
}
}

Спасибо.

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Это было в основном из-за height:100%.

      body {
        font-family: "Raleway", sans-serif;
      }
      .navbar {
        font-weight: 100;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 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;
      }

      #showcase {
        background: url("https://images.unsplash.com/photo-1478827536114-da961b7f86d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop")
          no-repeat bottom center;
        min-height: 30rem;
        position: relative;
        #header {
          z-index: 2;
        }
        #overlay {
          background: #000000;
          opacity: 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;
          }
        }
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Template</title>

    <!-- bootstrap 4.4 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

  </head>
  <body>
    <nav class="navbar navbar-expand-md  navbar-dark fixed-top">
      <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>

    <!-- Bootstrap js ,popper js and jquery  -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      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>

output

Как часть вашего последующего вопроса Также я хотел бы знать Если существующий здесь оверлейный элемент важен или нет?

От вас зависит, хотите ли вы добавить эффект overlay для определенной области. Обычно это делается для того, чтобы сделать какую-то часть ближе (более привлекательной / более сфокусированной) к пользователю

0 голосов
/ 23 марта 2020

Вы упомянули height:100% в стилях для .navbar. Я изменил это на height:15vh;, и, кажется, работает нормально. Не стесняйтесь играть со значением, пока не найдете его подходящим.

...