Joomla Templates Club 406,261 posts

[fbernardello Friend fbernardelloJoin date: February 2015Posts: 287Downloads:16Uploads:35 Thanks: 51 Thanked: 2 times in 2 posts]

#208734

Dear all,
When I started working with Teline V and its Megamenu I noticed one problem, which I really disliked: using the standard procedure it’s not possible to control in a detailed way the Categories set as module on mega-left Megamenu.
The result was a lot of pages in “Blog – Category style”, which are not in a menu, and can’t be managed properly.
Sure, it’s possible to define a default view, but this can be not enough.

The first workaround I tested was to define the categories I wanted to manage as other voices of the menu, but this solution wasn’t good, because I don’t want to have them twice on the menu, and the primary URL was build with a wrong path.

Then, I tried to define them again, as real menu, and then I created a menu-type module, which I configured on the Megamenu with mega-left attribute.
This is properly working! I can now manage all my category pages from a menu.

In addiction, to customize the look and feel of the Megamenu as the original, I defined a new class, called mega-nav2. This class has to be used on the menu-module used for mega-left, in “Advanced” – “Menu Class Suffix”.
This is the code you can add to custom.css file:

}
.mega-nav2 {
text-transform: uppercase;
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
margin-left: -5px;
margin-right: -5px;
}
.mega-nav2 > li {
list-style: none;
margin-left: 0;
color: #666666
background: #F2F2F2
}
.mega-nav2 > li a {
white-space: normal;
display: block;
padding: 5px;
color: #666666
background: #F2F2F2 !important;
}
.mega-nav2 > li a:hover,
.mega-nav2 > li a:focus {
text-decoration: none;
color: #000000 !important;
background: #F2F2F2 !important;
}
.mega-nav2 > li.active a {
text-decoration: none;
color: #000000
background: #F2F2F2 !important;
}
.mega-nav2 > li .separator {
display: block;
padding: 5px;
}
.mega-nav2 .dropdown-submenu > a::after {
margin-right: 5px;
}

Someone more expert than me with the CSS could be able to optimize it.

Regards,
Federico

[Author]

Posts