Free
Fit check
Great for
Restaurants
Cafés
Food & Drink Brands
Know before you buy
- Squarespace 7.1 only.
- Change icon alignment to left if mobile header layout moves icon to the left side.
- To use your own icon instead, upload it through Custom CSS > Manage Files and swap its URL into the code.
- Keep a copy of your Custom CSS before adding new snippets.
Version7.1
SetupEasy
Overview
Take Out Icon (Mobile Menu) is a free CSS plugin from Ghost Plugins for Squarespace 7.1. Use it to replace the default mobile menu burger icon with a take out box icon. It changes the header and navigation with a short snippet pasted into Custom CSS, so there is no script to load and nothing to sign up for.
What you get
- A copy and paste CSS snippet for Squarespace's Custom CSS panel
- Settings you can adjust in the code: take out box icon (menu is closed), close X icon (menu is open), menu icon alignment, menu icon size, menu icon colour (dark or light)
- Ghost lists it as compatible with all mobile header layouts.
- The take out box icon and a matching X close icon are included.
- Free use on unlimited personal and client sites under Ghost's licence
Who it suits
Designers and site owners who want the header or menu to feel less like a stock Squarespace template without paying for a full navigation plugin.
Honest limits
- Built for Squarespace 7.1; Ghost does not list 7.0 support.
- Change icon alignment to left if mobile header layout moves icon to the left side.
- To use your own icon instead, upload it through Custom CSS > Manage Files and swap its URL into the code.
- It targets Squarespace's own class names, so a future platform update could change how it looks. Re-check it if something shifts.
- Free plugins are provided as is; there is no paid support plan attached to them.
How it is delivered
Open the plugin page on Ghost Plugins, copy the CSS and paste it into Custom CSS in your Squarespace site, then save. There is no download, account or checkout. Ghost's licence allows free plugins on unlimited personal and commercial projects, but they cannot be resold, redistributed or bundled into products you sell.
Related guide: Free Squarespace plugins and the Squarespace plugins hub.
Take Out Icon (Mobile Menu) is a free CSS plugin from Ghost Plugins for Squarespace 7.1. Use it to replace the default mobile menu burger icon with a take out box icon. It changes the header and navigation with a short snippet pasted into Custom CSS, so there is no script to load and nothing to sign up for.
What you get: a copy and paste CSS snippet for Squarespace's Custom CSS panel; settings you can adjust in the code: take out box icon (menu is closed), close X icon (menu is open), menu icon alignment, menu icon size, menu icon colour (dark or light); Ghost lists it as compatible with all mobile header layouts; the take out box icon and a matching X close icon are included; free use on unlimited personal and client sites under Ghost's licence.
Who it suits: Designers and site owners who want the header or menu to feel less like a stock Squarespace template without paying for a full navigation plugin.
Honest limits: Built for Squarespace 7.1; Ghost does not list 7.0 support. Change icon alignment to left if mobile header layout moves icon to the left side. To use your own icon instead, upload it through Custom CSS > Manage Files and swap its URL into the code. It targets Squarespace's own class names, so a future platform update could change how it looks. Re-check it if something shifts. Free plugins are provided as is; there is no paid support plan attached to them.
How it is delivered: copy the CSS from the Ghost Plugins page into Custom CSS and save. It is free, with Ghost's licence covering unlimited personal and client sites but not resale.
What you get: a copy and paste CSS snippet for Squarespace's Custom CSS panel; settings you can adjust in the code: take out box icon (menu is closed), close X icon (menu is open), menu icon alignment, menu icon size, menu icon colour (dark or light); Ghost lists it as compatible with all mobile header layouts; the take out box icon and a matching X close icon are included; free use on unlimited personal and client sites under Ghost's licence.
Who it suits: Designers and site owners who want the header or menu to feel less like a stock Squarespace template without paying for a full navigation plugin.
Honest limits: Built for Squarespace 7.1; Ghost does not list 7.0 support. Change icon alignment to left if mobile header layout moves icon to the left side. To use your own icon instead, upload it through Custom CSS > Manage Files and swap its URL into the code. It targets Squarespace's own class names, so a future platform update could change how it looks. Re-check it if something shifts. Free plugins are provided as is; there is no paid support plan attached to them.
How it is delivered: copy the CSS from the Ghost Plugins page into Custom CSS and save. It is free, with Ghost's licence covering unlimited personal and client sites but not resale.
What it does
- Replace the default mobile menu burger icon with a take out box icon
- Ghost lists it as compatible with all mobile header layouts
- The take out box icon and a matching X close icon are included
Full specifications
Specifications
Squarespace Version
7.1
What it does
Replace the default mobile menu burger icon with a take out box icon
Ghost lists it as compatible with all mobile header layouts
The take out box icon and a matching x close icon are included
Ghost lists it as compatible with all mobile header layouts
The take out box icon and a matching x close icon are included
Key Features
Free css plugin for squarespace 7.1
Pasted into custom css, no javascript
5 adjustable settings in the code
Unlimited personal and client use under ghost's licence
Pasted into custom css, no javascript
5 adjustable settings in the code
Unlimited personal and client use under ghost's licence
Best for
Restaurants
Cafés
Food & drink brands
Cafés
Food & drink brands
Setup Difficulty
Easy
Considerations
Squarespace 7.1 only.
Change icon alignment to left if mobile header layout moves icon to the left side.
To use your own icon instead, upload it through custom css > manage files and swap its url into the code.
Keep a copy of your custom css before adding new snippets.
Change icon alignment to left if mobile header layout moves icon to the left side.
To use your own icon instead, upload it through custom css > manage files and swap its url into the code.
Keep a copy of your custom css before adding new snippets.
FAQs
FAQs
What does Take Out Icon (Mobile Menu) do?
It lets you replace the default mobile menu burger icon with a take out box icon. It is a free CSS plugin from Ghost Plugins for Squarespace 7.1.
Is it free?
Yes. It sits in Ghost Plugins' free plugin library, and Ghost's licence lets you use free plugins on unlimited personal and client sites. You cannot resell or redistribute the code.
How do I install it?
Copy the CSS from the Ghost Plugins page and paste it into your site's Custom CSS panel, then save. There is no JavaScript and nothing to add to Code Injection.
What can I change?
The code exposes these settings: take out box icon (menu is closed), close X icon (menu is open), menu icon alignment, menu icon size, menu icon colour (dark or light). You edit the values directly in the CSS.
Does it work on Squarespace 7.0?
Ghost lists it for Squarespace 7.1 only, so do not expect it to work on a 7.0 template.
Anything to know before I add it?
Ghost lists it as compatible with all mobile header layouts. The take out box icon and a matching X close icon are included.