В мобильной версии в phlox wordpress theme не отображается иконка меню, но нажимается. Решение было необычное, и вот быстрый ответ на этот вопрос:
Заменить файл /wp-content/uploads/2019/10/Group_1270.svg на рабочий.
О том как я нашел поломку
Заглянем в код:
<div class="aux-parallax-section elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-2aef2d6" data-id="2aef2d6" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-c63e02d elementor-widget elementor-widget-aux_menu_box" data-id="c63e02d" data-element_type="widget" data-widget_type="aux_menu_box.default"> <div class="elementor-widget-container"> <div class="aux-elementor-header-menu aux-nav-menu-element aux-nav-menu-element-c63e02d"><div class="aux-burger-box" data-target-panel="overlay" data-target-content=".elementor-element-c63e02d .aux-master-menu"><div class="aux-burger aux-lite-small"><span class="mid-line"></span></div></div><!-- start master menu --> <nav id="master-menu-elementor-c63e02d" class="menu-main-menu-container"> </nav> <!-- end master menu --> <section class="aux-fs-popup aux-fs-menu-layout-center aux-indicator" style="display: none;"><div class="aux-panel-close"><div class="aux-close aux-cross-symbol aux-thick-medium"></div></div><div class="aux-fs-menu" data-menu-title=""><ul id="menu-main-menu" class="aux-master-menu aux-skin-classic aux-with-indicator aux-with-splitter aux-toggle aux-narrow" data-type="horizontal" data-switch-type="toggle" data-switch-parent=".elementor-element-c63e02d .aux-fs-popup .aux-fs-menu" data-switch-width="768"> <!-- start single menu --> <li id="menu-item-173" class="a1i0s0 menu-item menu-item-type-post_type menu-item-object-page menu-item-173 aux-menu-depth-0 aux-menu-root-3 aux-menu-item"> <a href="/blog/" class="aux-item-content"> <span class="aux-menu-label">Блог</span> </a> </li> <!-- end single menu --> <!-- start single menu --> <li id="menu-item-172" class="a1i0s0 menu-item menu-item-type-post_type menu-item-object-page menu-item-172 aux-menu-depth-0 aux-menu-root-4 aux-menu-item"> <a href="/about-us/" class="aux-item-content"> <span class="aux-menu-label">О нас</span> </a> </li> <!-- end single menu --> </ul></div></section></div><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%40media%20only%20screen%20and%20(min-width%3A%20769px)%20%7B%20.elementor-element-c63e02d%20.aux-burger-box%20%7B%20display%3A%20none%20%7D%20%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> </div> </div> </div> </div> </div>
Нам нужен css от блока:
<div class="elementor-widget-container">
Заходим в «Инструмент разработчика» в браузере Chrome, включаем отображение мобильной версии сайта на теме Phlox, находим
<div class="elementor-widget-container">
и смотрим его CSS:
@media only screen and (max-width: 767px) post-135.cs…41239797:11 .elementor-135 .elementor-element.elementor-element-c63e02d .elementor-widget-container { background-image: url(/wp-content/uploads/2019/10/Group_1270.svg); min-width: 50px; background-repeat: no-repeat; }
Видим этот файл svg и пытаемся его открыть отдельным файлом в отдельном окне — не отображается. На этом месте понимаем, что может дело в файле и в файловом менеджере меняем его на другой svg — все заработало!