You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi,
First of all, thank you for making this wonderful product and keeping it as an open-source project so that others will also take advantage of the product.
I have used the tabler for three different study projects. The main hurdle was displaying a large number of menu items from the navbar dropdown list.
However, after a bit of studying and googling the same, I have found a solution and implemented it in one of my projects. Please, go through the following changes which I have made to implement the mega menu functionality.
Added following two classes in the tabler.css file
.navbar .has-megamenu {
position: static !important;
}
Use .has-megamenu CSS class along with nav-item dropdown CSS class where mega menu is required as follows :
Old : <li class="nav-item dropdown"></li>
New : <li class="nav-item dropdown has-megamenu"></li>
Use .megamenu CSS class along with dropdown-menu CSS class where mega menu will be visible on click as follows :
Old : <div class="dropdown-menu"></div>
New : <div class="dropdown-menu megamenu"></div>
I Hope, these changes will be integrated into the product so that the same utility is made available for existing and upcoming users.
Thank You, hope to receive a positive reply from your end
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi,
First of all, thank you for making this wonderful product and keeping it as an open-source project so that others will also take advantage of the product.
I have used the tabler for three different study projects. The main hurdle was displaying a large number of menu items from the navbar dropdown list.
However, after a bit of studying and googling the same, I have found a solution and implemented it in one of my projects. Please, go through the following changes which I have made to implement the mega menu functionality.
Added following two classes in the tabler.css file
.navbar .has-megamenu {
position: static !important;
}
.navbar .megamenu {
left: 0;
right: 0;
width: 100%;
margin-top: 0;
border-radius:0px;
}
Use .has-megamenu CSS class along with nav-item dropdown CSS class where mega menu is required as follows :
Old :
<li class="nav-item dropdown"></li>
New :
<li class="nav-item dropdown has-megamenu"></li>
Use .megamenu CSS class along with dropdown-menu CSS class where mega menu will be visible on click as follows :
Old :
<div class="dropdown-menu"></div>
New :
<div class="dropdown-menu megamenu"></div>
I Hope, these changes will be integrated into the product so that the same utility is made available for existing and upcoming users.
Thank You, hope to receive a positive reply from your end
Beta Was this translation helpful? Give feedback.
All reactions