All Collections
Features and Optimizations
Hamburger Menus Displayed as a Letter or Symbol
Hamburger Menus Displayed as a Letter or Symbol
Updated over a week ago

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 going to the HTML & CSS menu:

Scroll down to the “Generate critical CSS” setting and make sure that the “Remove @font-face rules from the critical CSS” option is not selected:

Next, go to the Fonts menu and find “Override font rendering behavior”:

Change the "Font-display value" to "fallback":

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.

Did this answer your question?