I'm using the HTML5 Side Navigation skin and I'd like to change the expander icon and its position. I have this code based on another forum post (viewtopic.php?f=9&t=31199), which works for changing it to the icon I want to use:
Code: Select all
.is-accordion-submenu-parent > a span.submenu-toggle /* Removes the default arrow/triangle */
{
border: none;
}
.is-accordion-submenu-parent > a span.submenu-toggle-container:after /* Adds an icon for when the menu is collapsed */
{
font-family: "Font Awesome 5 Free";
content: "\f105";
font-size: 14pt;
color: #e5e5e5;
top: 10px;
}
.is-accordion-submenu-parent > a span.submenu-toggle-container[aria-expanded='true']:after /* Adds an icon for when the menu is expanded */
{
font-family: "Font Awesome 5 Free";
font-size: 14pt;
content: "\f107";
color: #e5e5e5;
top: 10px;
}
.is-accordion-submenu-parent > a span.submenu-toggle-container /* Adjusts the positioning to center it - adjust to your needs */
{
height: 60%;
}
[aria-expanded='true'].is-accordion-submenu-parent > a span.submenu-toggle /* Stops the icon from flipping upside down when you expand the menu */
{
-webkit-transform-origin: none;
-ms-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}