Hi,
I have a side menu with submenus and I want to set a “collapsed” icon (>) to parent menu items when they are collapsed and “expanded” icon (V) when they are expanded. Is it possible?
Hello, Evgeny.
Yes, it is possible. You should extend the Halo theme and add icons in CSS rules for the following selectors:
- .c-sidemenu-item-header-open::before - expanded item
- .c-sidemenu-item-header::before - collapsed item
Best regards,
Daniil.
Hi,
I inserted these styles into halo-ext.scss:
.c-sidemenu-item-header::before {
content: "\f0da";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.c-sidemenu-item-header-open::before {
content: "\f0d7";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
and got the result but the icon and its’ menu item are separated (see attachment). How can I put them together?
Hi again,
Thank you, this code works fine:
.c-sidemenu-item-header .c-sidemenu-item-wrap .c-sidemenu-item-caption::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 10px;
}
.c-sidemenu-item-header-open .c-sidemenu-item-wrap .c-sidemenu-item-caption::before {
content: "\f0d7";
font-family: FontAwesome;
margin-right: 10px;
}
You are welcome!
Hi again,
Even better to set
margin-right: 7px;
in the second selector to compensate width differency of the both symbols.