V
V
vlados3323322021-02-06 13:21:38
Bootstrap
vlados332332, 2021-02-06 13:21:38

Boostrap dropdown bar not working there, how to fix?

With a full extension, everything works fine, when you click on "information" a window drops out ( class="dropdown-content" changes to class="dropdown-content show" )
In the mobile version, the window does not drop out, but if you look at the page code, it will change in the PC version, how to make it so that when you click, this window does not drop out of the PC version, but on the mobile. devices?
Code for PC:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i> Информация</button>
  <div id="myDropdown" class="dropdown-content">
 <a href="/o-nas">О нас</a>
<a href="/oplata">Оплата</a>
<a href="/dostavka">Доставка</a>
<a href="/kak-oformit-zakaz">Как оформить заказ</a>
<a href="news">Новости</a>
<a href="konsultaciya-po-okrashivaniyu">Консультация по окрашиванию</a>
<a href="/faq">Часто задаваемые вопросы</a>
  </div>
</div>

Mobile code:
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i> <span class="hidden-xs">Меню</span></button>
  <div id="myDropdown" class="dropdown-content">
 <a href="/o-nas">О нас</a>
<a href="/oplata">Оплата</a>
<a href="/dostavka">Доставка</a>
<a href="/kak-oformit-zakaz">Как оформить заказ</a>
<a href="news">Новости</a>
<a href="konsultaciya-po-okrashivaniyu">Консультация по окрашиванию</a>
<a href="/faq">Часто задаваемые вопросы</a>
  </div>
</div>

CSS If needed
/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
 /* Dropdown Button */
.dropbtn {
    background-color: #EEEEEE;min-width:73px;
    color: #000;
    padding: 8px;margin-top:10px;margin-left:2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.phonemobs {
    color: #000;
    font-size: 22px;
    margin-top: 12px;
    margin-bottom: 10px;
}
.phonemobs a {
    color: #000;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    /*background-color: #7b3f00;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

.responsive-menu-wrap .slicknav_btn {
padding: 28px 3px;
width: 65px;
left: 90px;
}
.responsive-menu-wrap .slicknav_nav {
width: 290px;
right: -9px;
left: 100px;
}

#slideshow0 {
  max-width: 1600px;
}

@media (min-width: 1600px) {
  #slideshow0 {
    margin: 0 auto;
  }
}
  .c1600 {margin:0 auto;
  }
@media (min-width: 1600px) {
  .c1600 {
  width: 1600px;
  }
}


@media (max-width: 768px) {
  #slideshow0 {
    margin-top:-130px;
  }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question