Joomla Templates Club 406,261 posts

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#198974

Hi there,

The layout of JA Biz for sub-submenus (ie third-level menus) is not ergonomic at all.
See image attached : when hovering submenu “Notre équipe”, its submenu appears… but much too low.

Actually, I tried playing with the following parameter margin-top (being 25 px in this case), but it is obviously not the good solution because it impacts not only my sub-submenu but also the whole submenu block itself…

How to solve this and have sub-submenus showing just to the right of its parent… and not too low

It is not only for having a nice layout for the eyes, it is above all to avoid the whole submenu to disappear when moving the mouse to the sub-subitem.

Txs

// The Dropdown
// ————
.mega-dropdown-menu {
}

.mega > .nav-child.mega-dropdown-menu {
border: none;
box-shadow: none;
color: @white;
background: @brand-primary;
margin-top: @t3-global-margin + 5px;

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539617

You go the right direction, just update the declaration a little bit as follows:

.t3-megamenu .mega > .nav-child.mega-dropdown-menu {
margin-top: 0;
}
.t3-megamenu .mega > .nav-child.mega-dropdown-menu .level3 {
padding: 0;
margin: -5px 0 0 -5px;
}

1 user says Thank You to Adam M for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539719

Hi,
Txs for helping !

I tried the solution, but it does not work as expected in the sense that
– if you change the t3-megamenu .mega > .nav-child.mega-dropdown-menu
then the submenu block also moves up… and the carret is not place properly any more
– the .level3 seems to have no impact… and I realized that it should be replaced by .level2 to have impact

So I tried to build upon your suggestion with the following :

.t3-megamenu .mega > .nav-child.mega-dropdown-menu {
margin-top: 25px;
}
.t3-megamenu .mega > .nav-child.mega-dropdown-menu .level2 {
padding: 0;
margin: -30px 0 0 10px;
}

As can be seen from screenshot hereafter, the carret of submenu block is now well positionned, and our last level of menu items shows just at the right place (just next to its parent item, not too low as originally)… but its blue background has not followed…
So could we fix that ?

Txs,

Marc

PS : see here the live version : http://synthesix.com/en/about-us/team
Easier if you want to play with the console to test directly the suggestions 🙂

Screenshot : “Team” is the parent item of “Didier”

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#539798

Hi Marc,

So you can try to apply top margin to 1st sub-level only by adding this declaration in CSS file:

.t3-megamenu > .navbar-nav > .mega > .mega-dropdown-menu {
margin-top: 25px;
}

Then remove the bottom margin of sub-level menu item if there’s only 1 element by adding this rule:

.t3-megamenu .dropdown-menu .mega-nav > li:last-child > a {
margin: 0;
}

[Author]

Posts