There are several utility classes, available through the template.
When creating a module instance of type 'Menu', go to the Advanced tab and enter the classes in the parameter 'Menu class'.
2.0+ overbg Will switch the menu items' text color from black to white so text can remain visible.
2.0+ pre For raw menus, will add expanding sub-menus functionality, with icon clickable in front of the menu item that can expand.
2.0+ post For raw menus, will add expanding sub-menus functionality, with icon clickable behind the menu item that can expand.
| Class 2.1+ | What it is for |
|---|---|
no-indent |
prevent menu indentation (all menu items stays at the same level) |
post-beside |
in conjunction with post, keeps the open/close icons close to the text |
fa-caret fa-square-caret fa-angle fa-angles |
changes the look of the open/close with FontAwesome icons |
To override the default icons of the raw menus
There are 3 possible solutions:
- Use the classes
fa-xxxprovided above - Override
html/mod-menu/raw.phpand create your own preset (an example is set in the file) - Override CSS with your own icon representation, in hexadecimal:
ul.mod-menu.rawmenu .active > .expcol::before,
ul.mod-menu.rawmenu .expanded > .expcol::before {
content: "\f0d8" !important;
}
ul.mod-menu.rawmenu .expcol::before {
content: "\f0d7" !important;
}2.0+ Bootstrap classes can be used as well.
For instance, use Bootstrap 5's flex-column to force menu items into a single column (menus are built and displayed via flexbox).
