Навбар исчезает при прокрутке - PullRequest
Новая
       6

Навбар исчезает при прокрутке

0 голосов
/ 12 апреля 2020

Моя проблема в том, что всякий раз, когда я прокручиваю вниз, <section> полностью закрывает панель навигации. Навбар зафиксирован и установлен наверху. HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Gotu&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>Pelicans</title>
  </head>
  <body>
    <div class="navbar">
      <a href="#home"
        ><img
          class="logo"
          height="100"
          src="https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-1/p200x200/15068898_1226936174051780_7166698313496052354_o.jpg?_nc_cat=101&amp;_nc_sid=dbb9e7&amp;_nc_ohc=ocyXiBkw3rcAX8xha1J&amp;_nc_ht=scontent-lax3-1.xx&amp;_nc_tp=6&amp;oh=a21d0f67f860f6befb0cdc68e01c3c2a&amp;oe=5EB3D4BA"
          width="100"
          alt=""
      /></a>
      <a class="link" href="#home">Home</a>
      <a class="link" href="#about">About</a>
      <a class="link" href="#gallery">Gallery</a>
      <a class="link-contact" href="#contact">Contact</a>
    </div>
    <section id="home"></section>
    <section id="about"></section>
    <section id="gallery"></section> <!-- Not in use yet -->
    <section id="contact"></section> <!-- Not in use yet -->
  </body>
</html>

CSS: 

body {
  background-color: #5cdb95;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding: 1em;
  padding-top: 0em;
  padding-bottom: 0em;
  grid-gap: 0em;
  background: #edf5e1;
  grid-auto-rows: minmax(100px, auto);
  border-bottom-style: solid;
  border-bottom-color: #05386b;
  font-family: "Gotu", sans-serif;
  font-size: 25px;
}
.navbar > .link {
  text-align: center;
  text-decoration: none;
  height: 100px;
  padding: 32px;
  transition: background-color 0.7s;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  font-family: inherit;
}
.navbar > .link:hover {
  background-color: #8ee4af;
  font-family: inherit;
}
.logo {
  border-radius: 50%;
}
.link-contact {
  padding-top: 0.6em;
  text-align: center;
  height: 65px;
  width: 180px;
  background-color: #379683;
  text-decoration: none !important;
  border-radius: 20px;
  color: #edf5e1;
  transition: background-color 0.7s;
  font-family: inherit;
}
.link-contact:hover {
  text-decoration: none !important;
  color: #edf5e1;
  background-color: #287566;
  font-family: inherit;
}
#home {
  background-color: blue;
  height: 680px;
}
#about {
  background-color: inherit;
  height: 680px;
  position: relative;
}

Примечание. Первый раздел не перекрывает панель навигации, только второй раздел. Переполнение стека говорит мне, что слишком большая часть этого вопроса является кодом, так что вот небольшой текст ...

1 Ответ

0 голосов
/ 12 апреля 2020

Это происходит для z-index проблемы.

Дайте это так: 

#about {
    background-color: inherit;
    height: 680px;
    position: relative;
    z-index: -99;
}
...