Hola. Vale, por partes:
Lo de las imágenes. Yo te he puesto código para sacar únicamente la imagen de la categoría raiz (es decir, la del menú superior) Si quieres que sea de otra manera, el código sería diferente. Tienes que buscar la imagen desde el código que forma el elemento LIST.
{if $depth == 1}{* IN NON TOP LEVEL CATEGORIES SHOW CATEGORY IMAGE *} {assign var=mainmenuCatId value="-"|explode:$node.page_identifier}{assign var=imagenname value="`$mainmenuCatId[1]`.jpg"} {assign var=imagencat value="{$smarty.const._PS_CAT_IMG_DIR_}{$imagenname}"} {if $imagencat|file_exists} <img border="0" class="imagen_categoria" src="{$urls.img_cat_url}{$mainmenuCatId[1]}.jpg"> {/if} {/if}
Inserta ese código justo después de donde se cierra el enlace. (Localiza este código alrededor de la línea 30 e inserta el nuevo después)
{$node.label} </a>
Solo falta estilar la imagen. Por defecto la situaremos de forma absoluta en el UL, y la ocultaremos. Después la mostraremos en un hover/focus. (Hazlo en custom.css)
.imagen_categoria { display:none; position:absolute; right:5px; top:50%; transform:translateY(-50%);-webkit-transform:translateY(-50%); } #_desktop_top_menu .top-menu[data-depth="1"] li a:hover + .img_categoria { display:block; }
En cuanto al menú cambiando en la visualización móvil es normal, la visualización móvil MUEVE físicamente el menú a otro contenedor (#_mobile_top_menu) y por lo tanto nada de lo que hemos hecho en CSS aplica aquí. Te recomiendo que cualquier cosa que modifiques en el css con respecto a todos estos efectos, lo realices únicamente dentro de un media query
@media (max-width:767px) { .imagen_categoria {display:none} } @media (min-width:768px) { Tu código para maquetar las imágenes }