Replace Mobile Menu = Icon With Text


Plugin Details

Replace the default burger menu icon with your own custom menu text.

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS


Add to Custom CSS

// REPLACE MOBILE MENU BURGER ICON WITH TEXT - GHOSTPLUGINS.COM  //

@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: 50px;
@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; } .header .header-burger { flex: 0 0 @menu-icon-text-width !important; }

// REPLACE MOBILE MENU BURGER ICON WITH TEXT - GHOSTPLUGINS.COM  //

Customizable Options

  • Menu Text (Menu Is Closed)

  • Menu Text (Menu Is Open)

  • Menu Text Color, Weight, and Font Family

  • Menu Text Width and Height

Notes

No plugin notes


Previous
Previous

Mini Announcement Bar

Next
Next

Text Highlight Color