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. In the fourth and final article, I will discuss how I fixed the bottom menu installed with WP Mobile Bottom Menu, which did not display the color when the bottom menu was selected.

About WP Mobile Bottom Menu Plugin

WP Mobile Bottom Menu is a plugin for installing a bottom menu at the bottom of the screen, with over 7,000 active installations as of March 2025.

The bottom menu at the bottom of the screen can be specialized and can be configured in detail.Two types of icons can be selected: Font Awesome and image.Since there are many setting items, it is better to set the general framework at the beginning and tweak it little by little.

WP Mobile Bottom Menu Settings

Menu appearance settings

After installing WP Mobile Bottom Menu, WP BNav Setting will be added to the admin menu.

It can be set to a very fine level of detail.(Click to enlarge)

The bottom menu is designed to be displayed at 768 px or less.It is intended to be displayed only on mobile phones.The background and text colors are designed to match the colors of the blog to make it look comfortable.

Menu content settings

The menu content will be available in the “Appearance” and “Menu” of the Administration menu, and menu items will be added in the old fashioned way.(Click to enlarge)

A total of four menus are set up: a blog home for the three languages and a link to the contact form for each language.

The blog home menu uses an image of a round national flag, with a light-colored background when selected.

The icon for the contact form uses Font Awesome.

LiteSpeed Cache Settings

Before applying UCSS, there is no particular display disturbance.

When the blog home for each language is displayed, the background of that menu becomes lighter in color to indicate which language is selected.

Status of defects after UCSS generation

The background color of the selected menu did not change.

Selecting the menu takes you to the blog home for each language, but the background color of the menu does not change and remains the original color, so it is no longer clear which language you have selected.

The class of the selected item had changed, so the JavaScript was functioning properly.

CSS does not seem to be reflected.

Countermeasures

I tried many things, but in the end I was able to counteract the problem by redefining the CSS in the Twenty Twenty Five child theme.

/* 20250306 WP BNav Selected item background color */
.bnav_bottom_nav_wrapper ul li>a .bnav_menu_items:hover, .bnav_bottom_nav_wrapper ul li.current_page_item a .bnav_menu_items, .bnav_bottom_nav_wrapper ul li.current_page_parent a .bnav_menu_items {
    background-color: #ebf6d3;
}

The CSS for WP Mobile Bottom Menu is the following file.

/plugins/mobile-bottom-menu-for-wp/public/css/wp-bnav-public.css

The method of excluding this file from optimization did not resolve the display disorder.On the contrary, two icons, one in the normal state and the other in the selected state, were displayed, and the display disorder worsened.

I was only able to resolve this by redefining only the relevant parts of the CSS in the child theme.

Musubi

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

In the case of the WP Mobile Bottom Menu, the standard exclusion from CSS optimization did not work.In return, the display disorder worsened.

I was able to counter this by redefining the CSS items in the Twenty Twenty Five child theme.

Each plugin needs to be adapted to the situation.Good experience.