Hello colleagues, I need help as I am a bit desperate. I have purchased and installed the mega menu pro module for prestashop. The thing is that in the mobile navigation you see an icon and the word menu very large, what I would like to do is, place a normal icon and when you click to call the mega menu to be deployed, ie, as a kind of modal that when you click on an icon that I add to the header, call the mega menu and this is deployed in the mobile version. I attach images and the code of my header.
HEADER.TPL
{block name='header_top'}
<div class="header-top {if $custom_generic.width_header == 1}full_width_generic{/if} {if $custom_generic.show_displaynav == 0}notdisplaynav{/if}">
<div class="container">
{if Context::getContext()->getDevice() < 4}
<div class="header__flex">
<div class="displayLogo hidden-sm-down" id="_desktop_logo">
{if $page.page_name == 'index'}
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" loading="lazy" height="{$custom_generic.logo_height}" width="{$custom_generic.logo_width}">
{else}
<a href="{$urls.pages.index}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" loading="lazy" height="{$custom_generic.logo_height}" width="{$custom_generic.logo_width}">
</a>
{/if}
</div>
<div class="displayTopCenter">
{hook h='displayTopCenter'}
<div class="clearfix"></div>
</div>
<div class="position-static displayTop">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
{hook h = 'displayMegaMenu'}
</div>
{else}
<div class="header__flex mobile">
<div class="mobile_top">
<div class="displayLogo" id="_desktop_logo">
{if $page.page_name == 'index'}
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" loading="lazy" height="{$custom_generic.logo_height}" width="{$custom_generic.logo_width}">
{else}
<a href="{$urls.pages.index}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" loading="lazy" height="{$custom_generic.logo_height}" width="{$custom_generic.logo_width}">
</a>
{/if}
</div>
<div class="position-static displayTop">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>
<div class="mobile_middle">
<div id="mobile__menu" data-toggle="modal" data-target="mm_menus_ul active">
<i class="fa-solid fa-bars d-inline"></i>
</div>
<div class="displayTopCenter">
{hook h='displayTopCenter'}
<div class="clearfix"></div>
</div>
</div>
</div>
{/if}
</div>
</div>
{hook h='displayNavFullWidth'}
{/block}
in the image 1 I attach as I would like it to be, (it is simply an icon).
