User Tools

Site Tools


alysum:flexmenu

FlexMenu



FlexMenu allows you to create unique submenu for each menu main item. Module based on ajax technology and you just need to type the text and it will be saved automatically.

NOTE! Please do not add default Prestashop system pages (Contact us, Our store, Sales/Specials, New products, Best sellers) as Custom links to the Flex menu. Because they will not work for multilingual stores.

How to manage

Here is the tutorial how to manage menu in the back office.

The Adobe Flash Plugin is needed to display this content.



How to add menu item “Brands”

The Adobe Flash Plugin is needed to display this content.

Troubles

Can't add new menu item

Error 500 or 503 when add the menu item

For Flex menu work if your site under maintenance mode your IP should be added as allowed

Nothing happens when add new menu item

If you are trying to add new menu item and content block doesn't show up our customer wrote that it can be Java applet problem (mac os with firefox). Just install the latest new version and after that the Flex module should work fine.

When I add "Home" category it redirects to "Page not found"


If you pick “Home” or “Root” category as shown on the screenshot above you'll see “Page not found” error when trying to pick this category in the menu in the front office. This happens because “Home” or “Root” are non existing categories.
If you need to add parent category with the name “Home” to the Flex menu just create “Home” category in the Catalog > Categories
Make it parent towards other categories.
Then you will be able to add it to the Flex Menu.

How to add "Home" menu item that will redirect to the home page

For this create the custom link “Home”
and add it to the Flex menu

Flex Menu won't add subcategories

After you created menu items in Flex menu you still need to pick subcategories/products/images to show in these items.
For that click on the text “Main section/Right section/Left section/Bottom section”
And pick manually the content you need

Modifications

Change menu items color, font size, space between the items

Add to the Modules > Theme Settings > CustomCSS

#white_bg #pattern .flexmenu > ul > li > a {
  color: #3a3a3c; /* Menu color */
  font-size: 19px; /* Menu font size */
  padding: 0 25px; /* Space between menu items */
  font-family: "Arial";
}
#white_bg #pattern .flexmenu > ul > li > a:hover {color: #e17365 !important} /* Menu color on mouse hover */


Change Flex Menu background color

 #pattern .flexmenu > ul {background:#fff;} /* 1 - menu background */
 #pattern .flexmenu > ul > li div.submenu {background: #f9f9f9;} /* 2 - submenu background */


Change underline

Here is the underline image http://docs.promokit.eu/lib/exe/fetch.php/alysum:flex_underline.gif Save and change its color in any image editor to the color you need. Then upload the image, for example, to the flex menu folder. After that add this code to the Theme Settings > CustomCSS

#pattern .flexmenuitem a span {background: url(http://your_site/image_path/active_item.gif) no-repeat -500px 100%}
#pattern .flexmenuitem > a span:before {background-color: transparent;}
@media (min-width: 729px) {
  #pattern .flexmenuitem:hover a span {background-position: 0 100%;}
}

Sub-category item 1


Change the size, color and line height of the sub-category item 1:

#white_bg #pattern ul.main-section-links > li > a {
  font-size: 14px; /* font size */
  line-height: 30px; /* line height */
  color: #000; /* text color */
  text-transform: uppercase; /* uppercase text, if you need disable it change to: none */
  font-family: "Arial";
}

Sub-category item 2

#white_bg #pattern ul.main-section-links ul.main-section-sublinks > li > a {
    color: #969696; /* text color */
    line-height: 16px; /* line height */
    font-size: 13px;  /* font size */
    font-family: "Arial";
  }
alysum/flexmenu.txt · Last modified: 2016/11/23 15:44 by Alex Support