1. Home
  2. Docs
  3. Fashionable Store Documentation
  4. Mega Menu

Mega Menu

From version 1.1.5 the Fashionable Store theme is compatible with the Max Mega Menu Plugin.
It is easy to use it. However you have to consult the documentation of the plugin as well if it is needed.

Step 1 – Install the recommended plugin “Max Mega Menu”.

Step 2 – Create a menu like you do.

View the image below:

 

  1. Enable the mega menu .
  2. If you hover over the items you will see a popup tag. Click on it and you can create the sub menus of the mega menu . Every item actually is a widget.
  3. Assign the menu to the “Main Menu Position” and click “Save”.
  4. Last you have to go to the Max Mega Menu plugin settings, under the “Menu Themes > Custom Styling”:

In the CSS Editor paste the following code:

.mega-sub-menu {
-webkit-box-shadow: 1px 1px 1px 11px rgba(200, 200, 200, 0.5);
box-shadow: 1px 1px 13px rgba(200, 200, 200, 0.5) !important;
z-index: 12000 !important;
}
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { 
font-size: 16px; 
} 
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:before { 
margin: 0;
} 
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:hover, 
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:active,
#{$wrap} #{$menu} > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
background: transparent;
color: inherit;
line-height: 26px;
height: unset;
margin: 0;
}
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:hover:before {
content: none;
}

#{$wrap} #{$menu} > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title{
font-weight: 600;
margin-bottom: 10px;
}
#{$wrap} #{$menu} > li.mega-menu-item > ul.mega-sub-menu > li ul li{
margin: 4px 0;
}

and save it. If you did everything ok, then you wil have a nice looking mega menu.

Tags