Emoji Mobile Menu = Icon

Site Header
Written By The Ghost Co.
Learn more

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.

The Ghost Co. http://www.ghostplugins.com
Previous

Replace Mobile Menu = Icon With Text
Next

Pushed Down Announcement Bar