Bootstrap 3 проблема в мобильном меню

REDGROUP
На сайте с 26.05.2021
Offline
14
396

Всем привет! Подскажите пожалуйста, как решить данную проблему? На телефоне раскрыты сразу все пункты подменю внутри самого меню, мне же необходимо, чтобы при открыии меню, пункты навигации у подменю были скрыты, и раскрывались лишь при клике. Как можно решить данную проблему не дублируя код и создания отдельной навигации для телефонной версии?

Код вёрстки 

<!-- MainNav -->
                <nav class="navbar-collapse collapse" id="mainnav">
                    <ul class="nav navbar-nav">
                        <li class="dropdown active"><a href="./">Home</a>
                            <ul class="dropdown-menu">
                                <li><a href="index.html">Home - Default</a></li>
                                <li><a href="index-v2.html">Home - Version 2</a></li>
                                <li><a href="index-v3.html">Home - Version 3</a></li>
                                <li><a href="index-v4.html">Home - Version 4</a></li>
                                <li><a href="index-static.html">Home - Image</a></li>
                            </ul>
                        </li>
                        <li><a href="about.html">About Us</a></li>
                        <li class="dropdown">
                            <a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">custom menu</a>
                            <nav class="navbar-collapse collapse" id="mainnav">
                                <ul class="nav navbar-nav">
                                    <li class="dropdown active"><a href="./">Home</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="index.html">Home - Default</a></li>
                                            <li><a href="index-v2.html">Home - Version 2</a></li>
                                            <li><a href="index-v3.html">Home - Version 3</a></li>
                                            <li><a href="index-v4.html">Home - Version 4</a></li>
                                            <li><a href="index-static.html">Home - Image</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                            <a href="service.html" class="dropdown-toggle">Accounting & Tax Services <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="service.html">Services List</a></li>
                                <li><a href="service-alter.html">Services List - Alter</a></li>
                                <li><a href="service-single.html">Services Single</a></li>
                                <li><a href="service-single-alter.html">Services Single - Alter</a></li>
                            </ul>
                        </li>
                        <li><a href="team.html">Team</a></li>
                        <li><a href="testimonial.html">Testimonial</a></li>
                        <li class="quote-btn"><a class="btn" href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <!-- #end MainNav -->

Выглядит это следующим образом

 


Ссылка на шаблон

У меня получилось это сделать продублировав код, но так как это старый бутстрап столкнулся с проблемой корректного скрытия этого всего на мобильных и наоборот используя visible, если скрывать для пк и отображать на мелких - по какой-то причине в меню тогда не появляется.... 

Буду благодарен за любые подсказки! Спасибо.

png search1.png
D.iK.iJ
На сайте с 26.05.2013
Offline
193
#1

Ну, скрытие подпунктов легко решается заменой в @media only screen and (max-width: 767px)

пункта с  display: block; на

.navbar-nav li .dropdown-menu { display: none;

Дальше  li.dropdown > a делаем инлайн-блоками, а на сам  li.dropdown  вешаем скрипт скрытия и открытия  .dropdown-menu (можно добавить в него проверку ширины экрана, чтобы не смущал на десктопе).


Не знаю, может можно это и как-то правильнее настроить...

А, да. Если переход в категории (вроде About Us) не нужен, можно повесить скрипт на саму ссылку. Или просто добавить этим ссылкам  pointer-events: none;

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий