Customising HTML sidenav expander icon

[bubble_ferret]

Hello,

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;
}

However, I'd like the icons to be on the left side of the titles. I have a right-pointing arrow for collapsed menu items, and a downward-pointing one for expanded items. When I tried to place the icons to the left, I couldn't work out how to change the icon to the downward pointing arrow for when the menu item is expanded. Has anyone encountered this problem before? Any suggestion is greatly appreciated!

[DaveMags]

If you haven't solved this yet, you can try adding a left value here:

Code: Select all

.is-accordion-submenu-parent > a span.submenu-toggle-container   
{
   height: 60%;
   left: 0px;
}

You can adjust the value (including using a negative value) to get the positioning correct.