How to set two different icons to expanded/collapsed menu items?

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?

menus

Hello, Evgeny.

Yes, it is possible. You should extend the Halo theme and add icons in CSS rules for the following selectors:

  1. .c-sidemenu-item-header-open::before - expanded item
  2. .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?

menus1

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.