Boostrap выпадающая панель работает криво, что не так?

Question

vlados332332 @vlados332332

Boostrap выпадающая панель работает криво, что не так?

Добрый день!
такая проблема:
При фулл расширении всё работает прекрасно, при нажатии на "информация" выпадаёт окно ( class="dropdown-content" меняется на class="dropdown-content show" )
В мобильной версии окно не выпадаёт, но если смотреть код страницы, то он будет меняться в версии для ПК, как сделать, что бы при нажатии, это окно выпадало не версии для ПК, а на моб. устройствах?
Код для ПК:

<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>

Код для мобильных:

<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 Если нужно

/* 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;
	}
}