Перейти к содержимому

На phlox wordpress theme не отображается иконка меню

  • автор:

В мобильной версии в 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="&lt;style&gt;" title="&lt;style&gt;" /> </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 — все заработало!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *