help to add drop down menu icon

[marco sotos navarro]

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).

 

 

Edited December 5, 2022 by marco sotos navarro (see edit history)

[endriu107]

I moved this topic to english language forum section, please post your topic in correct forum section.

[lordignus]

Have you contacted the developer of the module?