Menu icon Foundation
Substitute Text for Hamburger Icon

I would like to substitute the text "MENU" in place of the usual hamburger icon (menu-icon). How can I change this?

F6menu iconhamburger

I would like to substitute the text "MENU" in place of the usual hamburger icon (menu-icon). How can I change this?

Val Ery over 3 years ago

So?..

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button type="button" data-toggle>Menu</button>
</div>

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

The principle something like this:
-Remove class .menu-icon in title-bar div,
-add word "Menu" in your button

Steven Muncy over 3 years ago

Thanks. I assumed it was something deep in javascript.