Как убрать дублирующийся гамбургер?

Question

[1dzanami]

Подскажите пожалуйста. Есть сайт на modx revo и появилась проблема с отображением мобильного меню.

Почему то отображается 2 элемента. Хотя в header прописана просто обертка <div class="mobile-menu-wrapper"></div>
которая каким то не очень понятным для меня способом генерирует 2 блока

Answer 1

[Дмитрий]

Покажите код чанка/шаблона, который генерирует меню.

Comments

[1dzanami]

Вот header

<header>
    <!-- Header top area start -->
	<div class="header-top-area">
       <div class="container">
          <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-8">
                <div class="top-contact">
                   <a href="mailto:[[++email]]"><i class="fa fa-envelope"></i> [[++email]]</a>
                   <a href="tel:[[++phone]]"><i class="fa fa-phone"></i> [[++phone]]</a>
                   <a href="#"><i class="fa fa-clock-o"></i> [[++grafik]]</a>
                </div>   
             </div>
             <div class="col-xs-12 col-sm-12 col-md-4">
                <div class="top-menu">
                  <ul> 
                   <li><i class="fa fa-map-marker"></i> [[++adress]]</li>
                  </ul>  
                </div>
             </div>
          </div>
       </div>
    </div>
    <!-- Header top area End -->
    
    <!-- Header area start -->
	<div class="header-area">
      <div class="container"> 
        <!-- Site logo Start --> 
        <div class="logo">
          <a href="index.html"><h1><img src="[[++logo_top]]" /></h1></a>
        </div>
        <!-- Site logo end -->
        <div class="mobile-menu-wrapper"></div>
        <!-- Search Start -->
        <div class="dropdown header-search-bar">
          <a  href="#" class="wshipping-button cta-btn modal2" data-toggle="modal" data-target="#modalAppointment">Оставить заявку  </a>
        </div>
        <!-- Search End -->
        
        <!-- Main menu start -->
        <nav class="mainmenu">
            [[pdoMenu?
            	&parents=`0`
            	&tplOuter=`@INLINE <ul id="navigation">[[+wrapper]]</ul>`
            	&tpl=`@INLINE <li><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
            ]]
        </nav>
        <!-- Main menu end -->   
      </div>
    </div>
    <!-- Header area End -->
  </header>

[Дмитрий]

1dzanami, а в div.mobile-menu-wrapper каким образом попадает меню? JS?

[1dzanami]

Дмитрий, я так понимаю используется js slicknav menu

[Дмитрий]

1dzanami, Нужно смотреть туда, MODX ни при чем. Покажите код вызова этого плагина, посмотрим.

[1dzanami]

Дмитрий, он просто подключен в скриптах. А код https://codepen.io/reijia/pen/LYPKBbO

[Дмитрий]

1dzanami, такого быть не может, потому что где-то должна быть инициализация вроде такой:

<script>
	$(function(){
		$('#menu').slicknav();
	});
</script>

Можете дать временный доступ на [e-mail], я посмотрю.

[1dzanami]

Дмитрий, К сожалению доступ дать не могу. Но из вызова вот нашла такую конструкцию

$("ul#navigation").slicknav({
            prependTo: ".mobile-menu-wrapper"
        });

[Дмитрий]

1dzanami, по-видимому, данный код выполняется дважды.

[1dzanami]

Нашла в чем была проблема. При вызове меню не было параметра &tplInner
И id navigation применялся ко всем ul в меню. А так как вызов был через id, то и вызывалось 2 меню.
Вам спасибо большое за помощь, подсказали хоть в каком направлении всё искать.

<nav class="mainmenu">
            [[pdoMenu?
            	&parents=`0`
            	&tplOuter=`@INLINE <ul id="navigation">[[+wrapper]]</ul>`
            	&tplInner=`@INLINE <ul class="navigation">[[+wrapper]]</ul>`
            	&tpl=`@INLINE <li><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
            ]]
        </nav>

[Дмитрий]

1dzanami, да, я только что как раз подумал, что, вероятно проблема в дублирующемся селекторе.
Что ж, если я вам помог, отметьте ответ решением, если не затруднит)

[Дмитрий]

1dzanami, и на будущее лучше сразу давать ссылку на сайт, где возникла проблема. В этом случае можно понять все гораздо быстрее.