Website Building » Squarespace » How Do I Change the Hamburger Icon in Squarespace?

How Do I Change the Hamburger Icon in Squarespace?

Last updated on December 28, 2022 @ 8:13 pm

If you’re using Squarespace, you may have noticed that the hamburger icon (the three horizontal lines that indicate a menu) in the upper left corner of your screen is black by default. While this may not be a big deal to some, others may want to change the color of this icon to better match their brand or website’s overall aesthetic. Luckily, changing the hamburger icon’s color in Squarespace is a relatively simple process that can be done in just a few steps.

First, log in to your Squarespace account and go to the Settings tab.

Next, click on the Advanced option and then select Code Injection. Once you’re in the Code Injection section, you’ll want to paste the following code into the Header field:

<style>
#mobile-nav-toggle {
fill: #yourcolorhere!important;
}
</style>

Be sure to replace "#yourcolorhere" with the hex code of the color you want your hamburger icon to be. Once you've done that, simply click Save, and you're all set! Your new hamburger icon color will now show up on your site.

Conclusion:

In conclusion, changing the hamburger icon's color in Squarespace is a relatively simple process that can be done in just a few steps. First, log into your Squarespace account and go to the Settings tab. Next, click on Advanced and then select Code Injection. Once you're in the Code Injection section, paste the given code into the Header field.

Be sure to replace "#yourcolorhere" with the hex code of the color you want your hamburger icon to be. Once you've done that, click Save, and you're all set! Your new hamburger icon color will now show up on your site.

PRO TIP: The article 'How Do I Change the Hamburger Icon in Squarespace?' is a guide on how to change the hamburger icon in Squarespace. However, it is important to note that changing the hamburger icon can have unintended consequences. For example, if you change the hamburger icon to something that is not recognisable as a menu icon, then your users may not be able to find your menu. Therefore, it is important to be careful when changing the hamburger icon and to test your changes before making them live.
Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.