User Tools

Site Tools


Top Mega menu module

This is upgraded default prestashop dropdown module. MegaMenu shows all the subcategories in one dropdown list. In the right section random images from selected category are shown.

When you hover the menu item (category) the module shows product image from this category, not the categories image (Catalog>Categories, edit>Image)


  • Create your own categories menu via Back-office>Modules>Top Mega menu → Configure
  • You can add any pages\categories\subcategories\products\CMS pages\External links etc as menu item. External links should be with http://
  • Attention! Do not add the root category to the menu. Because it will be shown incorrectly.
  • If you have a lot of categories and sub categories the default 'Top horizontal menu' module might be better for you.
  • For showing an image in the right hand section of the menu, please make sure you have at least one product with an image in the mouse-over category or sub-category.
  • If you have products only in the sub-categories and don't have any in the main category, then you won't have an image for this category in the Mega Menu module. Just mark at least 1 product as the main category item. For example


All the css modifications should always be added to the end of the file /themes/alysum_2.0/css/alysum.css with a comment for example
/* $modifications*/ 

Font color and size of the menu items

You can change it only with the file modification. It's quite easy:

#pattern .sf-menu > li > a, #pattern .sf-menu > li > a.sf-with-ul {
   color: #3a3a3c; 
   font-size: 19px;
  • color: #3a3a3c; (the default color) - here you can add your desired color. If you don't know what is the code #3a3a3c just use any Hex Color Code Editor, for example
  • font-size: 19px; (the default font size) - you can increase or decrease the value 19px

Hover color

 #pattern ul.sf-menu > li.sfHover > a, #pattern ul.sf-menu a:hover { color: red; } 

Underline color (black by default)

#pattern .sf-menu, #pattern .mobileMenu { background-image: url(../../../modules/blockmegamenu/img/topmenu_bg.gif);}  
  • Change the path of image to your own or replace the default image (path of image /modules/blockmegamenu/img/topmenu_bg.gif )

Underline hover color (red by default)

#pattern .desktopView .sf-menu > li, #pattern .mobileMenu { background-image: url(../../../modules/blockmegamenu/img/active_item.gif) !important; }  
  • Change the path of image to your own or replace the default image (path of image /modules/blockmegamenu/img/active_item.gif )

Space between menu items

Increase or decrease the value 20px

 #pattern .sf-menu > li { margin: 0 20px; } 
alysum/top_mega_menu.txt · Last modified: 2014/02/07 18:24 (external edit)