На 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><style>@media only screen and (min-width: 769px) { .elementor-element-c63e02d .aux-burger-box { display: none } }</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.cs41239797:11
.elementor-135 .elementor-element.elementor-element-c63e02d .elementor-widget-container {
  1. background-image: url(/wp-content/uploads/2019/10/Group_1270.svg);
  2. min-width:
    50px

    ;

 
Видим этот файл svg и пытаемся его открыть отдельным файлом в отдельном окне — не отображается. На этом месте понимаем, что может дело в файле и в файловом менеджере меняем его на другой svg — все заработало!

Оставьте комментарий