Трабл на мобильном меню Bootstrap, как побороть?

Question

[sergey]

Есть проект сделанный на Bootstrap, пункты меню переключались по клику, клиент захотел что бы пункты срабатывали по hover, а при клике осуществлялся переход на страницу.

Поставил такой код для bootstrap меню чтобы срабатывало на hover:

.dropdown:hover > .dropdown-menu {
	display: block;
  }
  .dropdown:hover > .dropdown-menu > li > a {
	position: relative;
	z-index: 1000;
  }

теперь меню срабатывает и на hover и на клик, но на мобильных расширениях вылазит косяк при клике
и только со второго раза показывается меню корректно

как решить этот трабл на мобильных, что бы меню раскрывалось правильно?

Answer 1

[Ярослав Иванов]

@media (max-width: 767px)
.navbar-nav .open .dropdown-menu {
    display: block !important;
}

@media (max-width: 767px) {
.dropdown:hover > .dropdown-menu {
    display: none;
}
}

В общем вам надо тот выпадающий список скрывать на разрешениях меньше 767px тогда не будет дублежа и будет работать корректно.

Comments

[sergey]

Спасибо Вам, делал также, но не работало, а добавил в строчку .header .dropdown: hover > .... и сработало, где-то стили перебивались.

[sergey]

еще такой тогда вопрос, можно ли сделать в этом меню что при клике на родителя переход осуществлялся на страницу, а на hover появлялись подпункты. Оно так и работает но при клике переход не осуществляется...

[Ярослав Иванов]

SM: В мобильной версии или десктопной ?

[sergey]

Ярослав Иванов: сначала в десктопной, а насчет мобильной также хотелось, но будет ли оно работать

[sergey]

Ярослав Иванов: примеру пункт Сохраним Байкал, кликаю по нему но переход не осуществляется