Моя навигационная панель не прокручивается, когда я использую позицию: липкий - PullRequest
Новая
       0

Моя навигационная панель не прокручивается, когда я использую позицию: липкий

0 голосов
/ 18 февраля 2020

Я просмотрел некоторые другие вопросы, касающиеся не прилипающих панелей навигации, но я до сих пор не исправил их. Это может быть связано с тем, как я разместил свои теги, но я не совсем уверен. Возможно, я просто помещаю липкий код в неправильный селектор CSS.

Вот мой код: 

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
}
<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="./newstop.png" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020 

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
}
#topper{
  height: 200px;
  width: 100%;
}
<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
      <div>
       <p>
        <img src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
       </p>
      </div>
    </header>
0 голосов
/ 18 февраля 2020

Вы забыли использовать top: 0; после position: sticky;

Как это 

position: sticky;
top: 0;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...