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

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 CSS settings tab:


Scroll down to the “Optimize CSS Delivery” setting, click on “Additional options” and make sure that the “Remove @font-face rules from the critical CSS” option is set to disabled:


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


Click on “Additional options”. Select “fallback” as the font-display value.


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?