Emoji Mobile Menu = Icon

---

1. Plugin Info

Replace the default burger menu icon with an emoji (or other text).

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// Replace = Icon With Text - Ghost  //

@menu-icon-text-closed: "👋";
@menu-icon-text-closed-color: #fff;

@menu-icon-text-open: "😁";
@menu-icon-text-open-color: #fff;

@menu-icon-text-size: 30px;
@menu-icon-text-weight: normal;
@menu-icon-font-family: inherit;

@menu-icon-text-width: 20px;
@menu-icon-text-height: 20px;

/* --- Do Not Edit Below ---- */

.burger-box:after { content: @menu-icon-text-closed; text-align: right; font-size: @menu-icon-text-size; color: @menu-icon-text-closed-color; display: block !important; } .header--menu-open .burger-box:after { content: @menu-icon-text-open; color: @menu-icon-text-open-color; } .burger-box { width: @menu-icon-text-width !important; height: @menu-icon-text-height !important; } .burger-box div { display: none; }

// Replace = Icon With Text - Ghost  //

---

3. Customizable Options

• Emoji or Text (Menu Closed)

• Emoji or Text (Menu Open)

• Text Color, Weight, Font Family

• Text Container Width and Height

---

4. Plugin Notes

No notes.

---