skip to Main Content

I am using the theme Simple in my Shopify store and I need to change the hamburger menu into the text “menu” instead. Also the website is www.allabouttoytrains.com I was playing with the inspect element trying to get the desired effect but I’m also posting the file containing the HTML incase it helps.

sidebar.liquid

<div data-section-id="{{ section.id }}" data-section-type="sidebar-section">
  <nav class="grid__item small--text-center medium-up--one-fifth" role="navigation">
    <hr class="hr--small medium-up--hide">
    <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
    </button>
    <div id="SiteNav" class="site-nav" role="menu">
      <ul class="list--nav">
        {% for link in menus[section.settings.main_menu_link_list].links %}
          {% assign child_list_handle = link.title | handleize %}
          {% if menus[child_list_handle].links != blank %}
            <li class="site-nav--has-submenu site-nav__element">
              <button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}
                <span>+</span>
              </button>
              <button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}
                <span>-</span>
              </button>
              <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false">
                {% for childlink in menus[child_list_handle].links %}
                  <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
                    <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
          {% else %}
            <li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
              <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
            </li>
          {% endif %}
        {% endfor %}
        {% if shop.customer_accounts_enabled %}
          {% if customer %}
            <li>
              <a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a>
            </li>
            <li>
              <a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a>
            </li>
          {% else %}
            <li>
              <a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a>
            </li>
            <li>
              <a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a>
            </li>
          {% endif %}
        {% endif %}
      </ul>
      <ul class="list--inline social-links">
        {% if settings.social_facebook_link != blank %}
          <li>
            <a href="{{ settings.social_facebook_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
              {% include 'icon-facebook' %}
              <span class="icon__fallback-text">Facebook</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_twitter_link != blank %}
          <li>
            <a href="{{ settings.social_twitter_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
              {% include 'icon-twitter' %}
              <span class="icon__fallback-text">Twitter</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_pinterest_link != blank %}
          <li>
            <a href="{{ settings.social_pinterest_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
              {% include 'icon-pinterest' %}
              <span class="icon__fallback-text">Pinterest</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_instagram_link != blank %}
          <li>
            <a href="{{ settings.social_instagram_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
              {% include 'icon-instagram' %}
              <span class="icon__fallback-text">Instagram</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_google_plus_link != blank %}
          <li>
            <a href="{{ settings.social_google_plus_link }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
              {% include 'icon-google-plus' %}
              <span class="icon__fallback-text">Google Plus</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_tumblr_link != blank %}
          <li>
            <a href="{{ settings.social_tumblr_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
              {% include 'icon-tumblr' %}
              <span class="icon__fallback-text">Tumblr</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_youtube_link != blank %}
          <li>
            <a href="{{ settings.social_youtube_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
              {% include 'icon-youtube' %}
              <span class="icon__fallback-text">YouTube</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_vimeo_link != blank %}
          <li>
            <a href="{{ settings.social_vimeo_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
              {% include 'icon-vimeo' %}
              <span class="icon__fallback-text">Vimeo</span>
            </a>
          </li>
        {% endif %}
        {% if settings.social_fancy_link != blank %}
          <li>
            <a href="{{ settings.social_fancy_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
              {% include 'icon-fancy' %}
              <span class="icon__fallback-text">Fancy</span>
            </a>
          </li>
        {% endif %}
        {% if settings.main_blog != blank %}
          <li>
            <a href="/blogs/{{ settings.main_blog }}.atom">
              {% include 'icon-rss' %}
              <span class="icon__fallback-text">Blog</span>
            </a>
          </li>
        {% endif %}
      </ul>
    </div>
    <hr class="medium-up--hide hr--small {% if template.name == 'index' %}hr--border-bottom{% endif %}">
  </nav>
</div>

{% schema %}
  {
    "name": "Sidebar",
    "settings": [
      {
        "type": "link_list",
        "id": "main_menu_link_list",
        "label": "Menu",
        "default": "main-menu"
      }
    ]
  }
{% endschema %}

2

Answers


  1. a possible way is, to remove the 4 times

    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    

    maybe then you have to set the height from your menu also.
    actually I saw “menu” at your site and also the hamburger menu.

    btw. this is not an elegant solution, it`s more quick and dirty.

    Login or Signup to reply.
  2. Well, work the effect based on what you already have.

    var McButton = $("[data=hamburger-menu]");
    var McBar1 = McButton.find("b:nth-child(1)");
    var McBar2 = McButton.find("b:nth-child(2)");
    var McBar3 = McButton.find("b:nth-child(3)");
    
    McButton.click( function() {
      $(this).toggleClass("active");
      
      if (McButton.hasClass("active")) {
        McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
        McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
        			.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
        McButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
      } else {
        McButton.velocity("reverse");
    		McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
        			.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
      	McBar1.velocity("reverse", {delay: 800});
      }
    });
    /* Global Styles */
    body {
      margin: 0;
      padding: 0;
      background-color: hsl(355, 75%, 56%);
    }
    /* Hamburger Menu */
    .McButton {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -22px;
      margin-top: -22px;
      width: 44px;
      height: 33px;
      cursor: pointer;
    }
    .McButton b {
      position: absolute;
      left: 0;
      width: 44px;
      height: 3px;
      background-color: white;
    }
    .McButton b:nth-child(1) {
      top: 0;
    }
    .McButton b:nth-child(2) {
      top: 50%;
    }
    .McButton b:nth-child(3) {
      top: 100%;
    }
    /* McButton */
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
    
    <!-- Hamburger Menu -->
    <a class="McButton" data="hamburger-menu">
      <b></b>
      <b></b>
      <b></b>
    </a>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search