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

css_tab.png

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:

optimize_CSS_delivery.png

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

fonts.png

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

Article is closed for comments.