Блог

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

Навигационная панель начальной загрузки на мобильном устройстве отображается за всем остальным

#javascript #html #jquery #css #twitter-bootstrap

Вопрос:

Использовал загрузочную загрузку для оформления содержимого моего заголовка, но недавно столкнулся с чем-то странным. Навигационная панель, которая переключается после нажатия на меню гамбургера, отображается за всеми компонентами. Z-индекс максимален, но он не работает. Вот мой HTML:

 <header id="header" class="fixed-top">
<div class="container d-flex align-items-center">

  <a href="{% url 'index' %}"><img src="{% static 'assets/img/logo-hi-res.png' %}" alt="" class="ActLogo img-fluid"></a>
  <h1 class="logo me-auto"><a href="{% url 'index' %}"><span>My</span>Website.</a></h1>

  <nav id="navbar" class="navbar order-last order-lg-0">
    <ul>
      <li><a href="{% url 'index' %}" class="{% if nbar == 'index' %}active{% endif %}">Home</a></li>

      <li><a href="{% url 'about' %}" class="{% if nbar == 'about' %}active{% endif %}"><span>About</span></a>

      <li class="dropdown"><a href="{% url '#' %}" class="{% if nbar == 'services' %}active{% endif %}"><span>Services</span><i class="bi bi-chevron-down"></i></a>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
        </ul>
      </li>

      <li><a href="#" class="{% if nbar == '#' %}active{% endif %}">Pricing</a></li>
      
      <li><a href="#" class="{% if nbar == '#' %}active{% endif %}">Contact</a></li>
      
      <button class="clientBt btn btn-sm btn-primary mr-2"><a href="#">CLIENT LOGIN</a></button>

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
  </nav>

  <div class="header-social-links d-flex">
    <a href="#" class="twitter" target="_blank"><i class="bu bi-twitter"></i></a>
    <a href="#" class="facebook" target="_blank"><i class="bu bi-facebook"></i></a>
    <a href="#" class="instagram" target="_blank"><i class="bu bi-instagram"></i></a>
    <a href="#" class="linkedin" target="_blank"><i class="bu bi-linkedin"></i></i></a>
  </div>
</div>

И CSS:

 #header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: grayscale(0) contrast(3) blur(5px);
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);


}


#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  

}

#header .logo a {
  color: #d40b00;
}

#header .logo a span {
  color: #2C3380;
}

#header .ActLogo {
  width: 60px;
  height:  60px;
  margin-top: -24px;
  margin-bottom: -20px;
  margin-right: 10px;
}

/* Social Links */
.header-social-links {
  margin-left: 20px;
  border-left: 1px solid #c4c4c4;
}

.header-social-links a {
  color: #a0a0a0;
  display: inline-block;
  line-height: 0px;
  transition: 0.3s;
  padding-left: 20px;
}

.header-social-links a i {
  line-height: 0;
}

.header-social-links a:hover {
  color: #e85a5d;
}

@media (max-width: 480px) {
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }

  #header a .ActLogo {
    display: none;
    width: 40px;
    height: 40px;
  }
  #header .logo a {
    color: #E64238;
  }
  
  #header .logo a span {
    color: #2C3380;
  }



@media (max-width: 1200px) {
  #header a .ActLogo {
    display: none;
  }
}

}
@media (max-width: 1200px) {
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }
  #header .logo {
    font-size: 23px;
  }
  #header a .ActLogo{
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

/* Nav Menu */

/* Desktop */
.navbar {
  padding: 0;
  
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  text-transform: uppercase;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #565b99;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100%   30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-top: 2px solid #373F94;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #111;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #373F94;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

.clientBt{
  color: white;
  background-color: #2C3380;
  border: none;
  padding: 0px;
  margin-left: 30px;
  border-radius: 8px;
}

.clientBt:hover{
  background-color: #4b56ce;
}
.clientBt a{
  color: white;
  padding: 10px;
}
.clientBt a:hover{
  color: white;
}

/*Mobile Navigation*/

.mobile-nav-toggle {
  color: #111;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

/* SWITCH TO MOBILE HEADER */
@media (max-width: 1200px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }

}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
  height: auto;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
  z-index: 9999;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #111;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #2C3380;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #2C3380;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

И сценарий:

   // Mobile nav toggle
  on('click', '.mobile-nav-toggle', function(e) {
    select('#navbar').classList.toggle('navbar-mobile')
    this.classList.toggle('bi-list')
    this.classList.toggle('bi-x')
  })

  // Mobile nav activate dropdown 
  on('click', '.navbar .dropdown > a', function(e) {
    if (select('#navbar').classList.contains('navbar-mobile')) {
      e.preventDefault()
      this.nextElementSibling.classList.toggle('dropdown-active')
    }
  }, true)

Если вы хотите увидеть ошибку в действии, перейдите сюда, посмотрите представление для мобильных устройств и попробуйте переключить меню с гамбургера.

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

1. Все z-индексы уже почти исчерпаны. .navbar .ul имел 99. Увеличил этот показатель до 999. Не получилось.

2. подожди, дай мне посмотреть

Ответ №1:

Пришлось внести пару корректировок, на самом деле это вообще не проблема z-индекса.

  1. nav Элемент имеет overflow-hidden прикрепленный к нему элемент. Уберите его.
  2. ul У него нет высоты, добавьте a min-height: fit-content; .

Эти 2 изменения должны заставить его работать так, как вы ожидаете.

Метки: