Hamburger Menus Displayed as a Letter or Symbol

In some cases, hamburger menus may be displayed as a letter or symbol. This usually happens for a few seconds after the initial page load and can be easily resolved by tweaking @font-face and font-display rules.

Start by enabling the Manual Mode and going to the Advanced Settings.

Hamburger_Menus1.png

Scroll down to the “Optimize CSS Delivery” setting, click on “Additional options” and disable the “Remove @font-face rules from the critical CSS” option.

Hamburger_Menus2.png

Next, go to “Override font rendering behavior” and click on “Additional options”. Select “fallback” as the font-display value. 

Hamburger_Menus_3.png

To complete the process, save your settings and purge your website’s cache.

Once NitroPack re-optimizes your site, the hamburger menu should be displayed correctly.

Please note that in rare cases, you may have to use the block value. If this process doesn’t work, go back to the “Override font rendering behavior” setting and select “block” instead of “fallback”. Don’t forget to save your settings and purge the cache before testing again.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.