Блог

Главная - Вопросы по программированию - Исправлена панель навигации поверх боковой панели браузера с вертикальной прокруткой

Исправлена панель навигации поверх боковой панели браузера с вертикальной прокруткой

#html #css

#HTML #css

Вопрос:

Моя панель навигации находится поверх вертикальной полосы прокрутки браузера.

Я действительно не знаю, в какой момент в моем проекте это произошло, но я присвоил моей панели навигации фиксированное положение и ширину 100% с z-индексом: 99.

Кто-нибудь знает, почему это может происходить?

Спасибо заранее, счастливого кодирования!

Вот мой HTML-код:

 <header class="showcase">

<nav class="nav-bar">
  <div>
    <a href="#"><img src="../src/images/logo.svg" alt="LBH Logo" class="nav-logo"></a>
  </div>

  <ul class="nav-links">
    <li><a href="#abt">About</a></li>
    <li><a href="#srv">Services</a></li>
    <li><a href="#soc">Social</a></li>
    <li><a href="#inf">Contact</a></li>
  </ul>

  <div class="nav-social">
    <i class="fab fa-instagram "></i>
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
  </div>

  <div class="hamburger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

  </div>
</nav>

И вот мой css:

 .showcase {
  height: 120vh;
  background: linear-gradient( rgba(0, 0, 0, .9), rgba(0, 0, 0, .9) ), 
  url(../src/images/showcase-background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.showcase .nav-bar {
  width: 100%;
  height: 8rem;
  background-color: var(--branding);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  z-index: 90;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
  top: 0;
}

.nav-logo {  /*CHECK WHEN UPLOADING LOGO*/
  width: 14rem;
  margin: auto .5rem;
}

.showcase .nav-bar .nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.showcase .nav-bar .nav-links li {
  margin-bottom: .5em;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: .2em;
  list-style: none;
  transition: all .2s;
}

.showcase .nav-bar .nav-links a {
  color: var(--lightgrey);
  text-decoration: none;
}

.nav-links li:hover,
.nav-links li:focus {
  transform: scale(1.2);
}

.showcase .nav-bar .nav-social {
  margin: 0 2rem .5rem 2rem;
}

.showcase .nav-bar .nav-social a {
  margin: 0 .5rem;
  text-decoration: none;
  color: var(--lightgrey);
  font-size: 1.8rem;
}

Я также хотел бы спросить, как вы отображаете значки fontawesome? я вставил фрагмент кода html, но я не могу придать им какую-либо ширину, поэтому я их не вижу.

Комментарии:

1. Вы хотите сказать, что хотите, чтобы она отображалась поверх вертикальной полосы прокрутки? Это возможно путем разделения тела на прокручиваемые и не прокручиваемые разделы. Если вы НЕ хотите, чтобы это происходило, и это происходит, какой браузер вы используете? Происходит ли такое же поведение во всех браузерах?

2. Вы могли бы добавить соответствующие части своего кода в свой ответ, чтобы мы могли видеть воспроизведение вашего поведения . Таким образом, вы помогаете нам помочь вам, и вы можете сами найти проблему таким образом.

3. Извините, я имел в виду, что это происходит, и не хочу этого. Просто проверил в другом браузере, и это тоже происходит.