Answer the question
In order to leave comments, you need to log in
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>
<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>
/* 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 questionAsk a Question
731 491 924 answers to any question