@pavlova1906

Не работает мобильное меню после натягивания на вордпресс. Как исправить?

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

<div class="col-lg-9">
						<nav class="navbar navbar-expand-lg navbar-light main-menu-nav">
					    <button class="navbar-toggler" type="button" data-toggle="offcanvas">
					      <span class="navbar-toggler-icon"></span>
					    </button>
					    <div class="navbar-collapse offcanvas-collapse" id="navbarSupportedContent">
					    	<button class="offcanvas-close" type="button" data-toggle="offcanvas-close">
        ×
      </button>
      					<div class="navbar-nav mr-auto">
					      <?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>
					    </div>
					    </div>
					  </nav>
					</div>


<script>
    $(function () {
      'use strict';
      $('[data-toggle="offcanvas"]').on('click', function () {
        $('.offcanvas-collapse').addClass('open');
        $('body').addClass('offcanvas-open');
      })
      $('[data-toggle="offcanvas-close"]').on('click', function () {
        $('.offcanvas-collapse').removeClass('open');
        $('body').removeClass('offcanvas-open');
      })
    })
</script>

.offcanvas-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -300px;
        width: 200px;
        height: 100%;
        padding-top: 3rem;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: #fff;
        transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out, visibility .3s ease-in-out;
        transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
      }

      .offcanvas-collapse.open {
        visibility: visible;
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
      }

      .offcanvas-close {
      	display: block;
        position: absolute;
        font-size: 2.5rem;
        font-weight: 700;
        cursor: pointer;
        border: none;
        -webkit-appearance: button;
        background-color: transparent;
        right: 0;
        top: 0;
        padding: 0 1.5rem;
        color:#eaeaea;
      }

      .offcanvas-open {
        overflow: hidden;
      }
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы