Jump to content
Golondrina

Modificar / personalizar MENU HORIZONTAL

Recommended Posts

Hola,

Tenemos un problema con el menú principal de la home. El logotipo de la tienda (a la izquierda) queda tapado con la barra del menú horizontal (en morado).

1523513583_Capturadepantalla2019-05-16alas20_00_21.thumb.png.b60143c7490b277583848c789d803f83.png

Desde los ajustes de AN Themes solo puedo modificar el color de la barra pero no puedo cambiar ni el tamaño ni la alineación de las categorías. ¿Cómo podría hacer más pequeña la parte morada para que no tapara el logo?

También me gustaría hacer más pequeño el espacio del menú para que no haya tanto espacio en blanco por arriba y por debajo.

Mi tema se llama Shein, de Prestashop Addons y el módulo se llama Anvanto Mega Menu.

Muchas gracias

Share this post


Link to post
Share on other sites

Yo lo que hago en mi prestashop 1.7.5.1 es centrar el logo encima del menú. Así también tengo más sitio para poner más categorías. Igual eso te podría servir. Es una solución que encontré en este foro.

Yo uso el tema por defecto, el classic. Modifico el fichero header.tpl, apenas hay que cambiar un par de cosas, o tres:

{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
          <div class="col-md-5 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-7 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
            {if $page.page_name == 'index'}
              <h1>
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
              </h1>
            {else}
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
            {/if}
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More