Навбар не кликабелен только в одном разделе сайта - PullRequest
Новая
       16

Навбар не кликабелен только в одном разделе сайта

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

Я хочу, чтобы навигационная панель оставалась в фиксированном положении. Это работает нормально, но ссылки не кликабельны в моем разделе витрины. Как только вы прокрутите страницу вниз, она снова станет активной. Мне нужна помощь, чтобы понять, почему это происходит 

 <nav id="nav-bar">
      <h2 class="logo">
      <span class="txt-primary"><i class="far fa-moon"></i></span> | MMM
    </h2>
      <ul>
        <li class="nav-link"><a href="#about">About</a></li>
        <li class="nav-link"><a href="#service">Services</a></li>
        <li class="nav-link"><a href="#videos">Videos</a></li>
        <li class="nav-link"><a href="#contact">Contact</a></li>
      </ul>
    </nav>

CSS: 

#nav-bar {
  display: flex;
  position: fixed;
  width: 100%;
  background: rgba(60,3,56,0.8);
  color: #dbd8e5;
  justify-content: space-between;
  padding: 0.4rem;
}

#nav-bar ul {
  display: flex;
  align-items: center;
}

#nav-bar ul li a {
  padding: 0.55rem;
  color: #7c72a0;
}
#nav-bar ul li a:hover {
  background: #5f0d45;
  color: #dbd8e5;
  padding: 0.75rem;
}

1 Ответ

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

Добавьте z-index к вашему #nav-bar, чтобы сложить его выше, чем "витрина".

z-index: 99999;

Любой элемент, значение которого position отличается отзначение по умолчанию static может быть сложено на оси z (ваша навигация равна position: fixed;).Более высокие числа находятся сверху.

Вы можете установить очень высокое бессмысленное значение, например 99999, но я рекомендую дать ему число, которое имеет смысл, и вы можете управлять.Найдите z-index из "раздела витрины" и установите его выше, чем это.Если не установлен z-index, то простой z-index: 1; может сработать (но, если принять во внимание его навигацию, лучше использовать большее число).

Если вы используете sass или меньше, вы можете легче отслеживать, устанавливая переменныедля ваших сайтов z-index.

Кроме того, прочитайте о контексте стека , потому что это сложнее, чем просто установка более высоких чисел.

Удачи!

...