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 third article, we will discuss how we fixed the problem of the hamburger menu not being displayed on the WP Mobile Menu.

About WP Mobile Menu Plugin

WP Mobile Menu is a plugin for placing menus at the top, bottom, left, and right.

I mentioned that you can set up a top, bottom, left and right menu, but the free range allows you to set up the top, left and right menus. For a fee, bottom menu can also be installed.

In this case, the hamburger menu is used for the top menu and the global menu alternative is used for the right menu.

WP Mobile Menu Settings

Menu appearance settings

After installing WP Mobile Menu, Mobile Menu Options will be added to the admin menu.

It is possible to set very detailed settings.The font type can also be set in great detail, but once you start obsessing over it, you won’t be able to stop, so it is better to adjust the color and font size first, and then modify it little by little.(Click to enlarge)

This blog uses a hamburger menu for the top menu, with the right side menu enabled.

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)

You can specify fixed pages, custom links, categories, tags, etc.

Since this site is multilingual, three types of items are prepared for each category, and the items to be shown or hidden are divided according to the language type.

If the translation by Bogo is properly set up, tags and categories will be automatically switched for each language.

LiteSpeed Cache Settings

Before applying UCSS, there is no particular display disturbance.Clicking on the hamburger menu opens the menu on the right side and closes it with a cross.It works fine.

Status of defects after UCSS generation

The hamburger menu no longer functions.

The class was rewritten in JavaScript and the display was changed in CSS accordingly. class was rewritten, so JavaScript is functioning properly.

CSS display changes were not working.

Countermeasures

The most basic methods were used to address the issue.

WP Mobile Menu uses three CSS files.

/plugins/mobile-menu/includes/css/mobmenu.css
/plugins/mobile-menu/includes/css/mobmenu-icons.css
/uploads/dynamic-mobmenu.css

These CSS files were added to the “Exclude and inline UCSS files” and the UCSS was regenerated.The file sizes are 8.6kB, 5.2kb, and 9.7kb respectively.

We believe that inlining is more effective than simply excluding.I put the style.css of the Twenty Twenty Five child theme to be rewritten in the CSS exclusion, and inline the other CSS that is not edited.(Click to enlarge)

I tried to deal with this by adding an item in the Twenty Twenty Five child theme and looked for the working part of the hamburger menu, but could not find it successfully.

In this case, we addressed this issue by excluding it from the basic method of CSS optimization.

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 Menu, we addressed this by excluding it from the standard CSS optimization.If too many items are excluded, the LiteSpeed Cache plugin will be less effective because fewer parts will be optimized.

We are trying to find ways to deal with the problem without increasing the number of excluded items as much as possible.