Replace Mobile Menu = Icon With Text

Site Header
Written By Ghost

1. Plugin Info

Replace the default burger menu icon with your own 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 =";
@menu-icon-text-closed-color: #000;

@menu-icon-text-open: "Close x";
@menu-icon-text-open-color: #000;

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

@menu-icon-text-width: 60px;
@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

  • Menu Text (When Menu Is Closed)

  • Menu Text (When Menu Is Open)

  • Menu Text Color, Weight, and Font Family

  • Menu Text Container Width and Height

4. Plugin Notes

  • No plugin notes

Ghost http://www.ghostplugins.com
Previous

Image Block - Border Style
Next

Emoji Mobile Menu = Icon