Four display distortions occurred when UCSS was generated by LiteSpeed Cache’s page optimization. This section describes how to correct the display disorder in four separate articles. The second article is about the correction of the plus sign for category expansion in the WPB Accordion Menu, which has been moved from the end of the line to the beginning of the line.

About WPB Accordion Menu Plugin

WPB Accordion Menu is a plugin that displays hierarchical categories in a tree format, with symbols at the end of lines to expand and store child categories.

Although there are only a few items in the plugin settings to fix the display (only the skin selection), it is relatively easy to modify the look and feel by setting the CSS separately.

A paid Pro version is also available, but the free version has sufficient functionality if all you need is to create a category hierarchical menu.

WPB Accordion Menu Settings

Menu settings

It is displayed in English, but there are no complicated settings.(Click to enlarge)

• Create a new menu
• Select and save category in Taxonomy
• Place a block in the Gutenberg editor and select the menu

Despite appearances, the category hierarchical menu will appear once the blocks are placed.

CSS Settings

The only choice for appearance is the skin, so detailed modifications must be made to the CSS.

/* 20250130 WPB Accordions Settings */
.wpb_wmca_accordion_wrapper_theme_transparent ul li a {
    color: #455222 !important;
    font-weight: normal;
}
.wpb_category_n_menu_accordion>ul>li>a {
    font-size: 22px;
}
.wpb_category_n_menu_accordion ul li>a>span.wpb-submenu-indicator {
    color: #455222 !important;
    font-size: 30px;
    font-weight: normal;
}
.wpb_category_n_menu_accordion li a {
    color: #455222 !important;
    font-size: 20px;
    font-weight: normal;
}
.wpb_category_n_menu_accordion>ul>li>a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: normal;
    padding: 10px 0px;
}
.wpb_wmca_accordion_wrapper_theme_transparent ul ul li a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: normal;
    padding: 10px 0px;
}
.wpb_wmca_accordion_wrapper_theme_transparent ul ul {
    padding-inline-start: 5px;
}

Applying this CSS will result in a category hierarchical menu as shown below.

LiteSpeed Cache Settings

Before applying UCSS, there is no particular display disturbance; even after JavaScript is optimized, the behavior is normal.

Clicking on the plus sign rotates the symbol and opens a menu.Selecting a category displays the category’s Archive page.

Status of defects after UCSS generation

When UCSS is generated and reflected, the plus sign at the end of a line is moved to the top of the line to expand the category.Also, when I click on the symbol, it does not rotate.

Clicking on the plus sign will expand the category, and selecting a category will bring up the category’s Archive page.

Since the problem is only visual, I assumed it was a CSS bug, not JavaScript.

Countermeasures

By reconfiguring the two CSS items of the WPB Accordion Menu in the Twenty Twenty Five child theme, I was able to suppress the display disorder.

The plus sign now returns to the end of the line and rotates on click.

/* 20250303 WPB Accordions for UCSS optimization */
.wpb_category_n_menu_accordion ul li>a>span.wpb-submenu-indicator {
    position: absolute;
    right: 0;
    width: 47px;
    height: 100%;
    top: 0;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -o-transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -webkit-transition: transform .3s linear;
    -ms-transition: transform .3s linear;
}
.wpb_category_n_menu_accordion li.wpb-submenu-indicator-minus>a>span.wpb-submenu-indicator {
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

Excluding one of the WPB Accordion Menu CSS files from optimization and inlining it may have fixed the problem.However, the CSS file is about 8kB in size.We decided to use this method because the less we have to modify, the better.

Musubi

The standard way to fix display distortions in the LiteSpeed Cache plugin is to exclude JavaScript or CSS from the optimization.

Excluding the entire CSS file from optimization will exclude all but the necessary portions, which will not be minified and will be loaded as a separate file, increasing traffic.

If the CSS file itself is optimized and only necessary items are redefined in the Twenty Twenty Five child theme, you can maintain a more optimized state, so if you can find the cause, this would be better.