Выпадающее меню уходит за блок bootstrap 4

181
12 мая 2019, 22:20

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background-image: url(FonCar.png); 
  background-size: cover; 
  overflow-x: hidden; 
  width: 100vw; 
} 
 
body::-webkit-scrollbar { 
  width: 0.7em; 
  background: transparent; 
} 
 
body::-webkit-scrollbar-thumb { 
  background: #1D1E22; 
} 
 
.shapka { 
  height: 250px; 
} 
 
.car { 
  pointer-events: none; 
  width: 600px; 
  height: 375px; 
  left: 23%; 
  top: -60px; 
} 
 
.logo { 
  width: 500px; 
  height: 200px; 
  float: left; 
  margin-top: -25%; 
} 
 
.logotable { 
  position: relative; 
  height: 200px; 
} 
 
.box { 
  width: 400px; 
  height: 55px; 
  background: white; 
  opacity: 0.9; 
} 
 
.zagolovok { 
  text-align: center; 
  color: black; 
  font-size: 26px; 
  font-family: Impact; 
  word-wrap: break-word; 
  white-space: nowrap; 
} 
 
.bg-light { 
  opacity: 0.92; 
} 
 
.content { 
  word-wrap: break-word; 
  background-color: white; 
  min-height: calc(100vh - 100px); 
} 
 
.footer { 
  height: 80px; 
  background: #1D1E22; 
  margin: 0; 
} 
 
.labelincontent { 
  width: 100%; 
  /* Ширина */ 
  text-align: left; 
  /* Выравниваем по правому краю */ 
  background: #1D1E22; 
  padding-left: 5px; 
  color: white; 
} 
 
ul.hr li { 
  display: inline; 
  font-size: 20px; 
  color: black; 
  padding-left: 10px; 
  position: relative; 
} 
 
p, 
h2, 
h3 { 
  padding-left: 5px; 
} 
 
.logomobile {} 
 
ul.hrmobile li { 
  display: inline; 
  font-size: 10px; 
  text-decoration: none; 
} 
 
a { 
  color: white; 
} 
 
a:hover { 
  color: #c9c9c9; 
  text-decoration: none; 
} 
 
.input { 
  border: solid 1px #E5E5E5; 
  font-size: 20px; 
  width: 60%; 
  background: -webkit-gradient( linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
  margin-left: 10px; 
  padding-left: 5px; 
} 
 
.shapka .col-md .col-sm { 
  display: none; 
} 
 
.next { 
  color: black; 
} 
 
hr { 
  border: none; 
  /* Убираем границу */ 
  background-color: gray; 
  /* Цвет линии */ 
  height: 1px; 
  /* Толщина линии */ 
  opacity: 0.2; 
} 
 
.map-responsive { 
  overflow: hidden; 
  padding-bottom: 56.25%; 
  position: relative; 
  height: 0; 
} 
 
.map-responsive iframe { 
  left: 0; 
  top: 0; 
  height: 100%; 
  width: 100%; 
  position: absolute; 
}
<nav class="navbar navbar-expand-lg navbar-light bg-light "> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> 
  <span class="navbar-toggler-icon"></span></button> 
 
  <a class="navbar-brand" href="index.html">BARS</a> 
 
  <div class="collapse navbar-collapse opacity-0.5" id="navbar"> 
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
      <li class="nav-item active border-right-0"> 
        <a class="nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
          Виды ремонта 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
          <a class="dropdown-item" href="#">Услуги автосервиса</a> 
          <a class="dropdown-item" href="#">Ремонт гибридов</a> 
          <a class="dropdown-item" href="#">Компьютерная диагностика</a> 
          <a class="dropdown-item" href="#">Сервисное обслуживание</a> 
          <a class="dropdown-item" href="#">Ремонт инжектора</a> 
          <a class="dropdown-item" href="#">Ремонт двигателя</a> 
        </div> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link " href="kakproexat.html">Как проехать</a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link " data-toggle="modal" data-target="#obratsv" href="#">Обратная связь</a> 
      </li> 
      <li class="nav-item d-lg-none d-xs-block"> 
        <a class="nav-link ">Телефон:+79069960426</a> 
      </li> 
      <li class="nav-item d-lg-none d-xs-block"> 
        <a class="nav-link ">Адрес: Русская,35</a> 
      </li> 
    </ul> 
  </div> 
</nav>

У меня уходит выпадающее меню за блок. Что и как поделать, не знаю. Прилагаю скрин.

Answer 1

Нижний блок перекрывает объекты из верхнего блока с меню. z-index нужно применять именно для родителя, а не выпадающего списка.

.navbar {
    z-index: 2;
}

Answer 2

Задай z-index: 1000 выпадающему списку. Но чтобы сказать точнее нужен твой css-код.

READ ALSO
Якорный тег не работает в iPhone Safari

Якорный тег не работает в iPhone Safari

Помогите решить проблемуЯкорный тег не работает в iPhone Safari код:

173
Адаптивная верстка с Bootstrap 4

Адаптивная верстка с Bootstrap 4

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

209