Re: how to add social media icons on the bottom of the mobile menu only in Brooklyn theme?

Solved

how to add social media icons on the bottom of the mobile menu only in Brooklyn theme?

lslelegance
Trailblazer
229 2 49
Accepted Solutions (2)

KetanKumar
Shopify Partner
36927 3642 11995

This is an accepted solution.

@lslelegance 

can you please share mobile menu code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36927 3642 11995

This is an accepted solution.

@lslelegancethanks for assint

i have done this please check also someone some issue ty ths code

drawer-menu.liquid

  <div class="drawer__inner drawer-left__inner">

    {% if section.settings.drawer_search_enable %}
      {% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
    {% endif %}

    <ul class="mobile-nav">
      {% for link in linklists[section.settings.main_menu_link_list].links %}
        {% if link.links != blank %}
          <li class="mobile-nav__item">
            <div class="mobile-nav__has-sublist">
              <a
                href="{{ link.url }}"
                class="mobile-nav__link"
                id="Label-{{ forloop.index }}"
                {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>{{ link.title | escape }}</a>
              <div class="mobile-nav__toggle">
                <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
                  <span class="icon-fallback-text mobile-nav__toggle-open">
                    <span class="icon icon-plus" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
                  </span>
                  <span class="icon-fallback-text mobile-nav__toggle-close">
                    <span class="icon icon-minus" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
                  </span>
                </button>
              </div>
            </div>
            <ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
              {% assign parent_index = forloop.index %}
              {% for childlink in link.links %}
                {% if childlink.links != blank %}
                <li class="mobile-nav__item">
                  <div class="mobile-nav__has-sublist">
                    <a
                      href="{{ childlink.url }}"
                      class="mobile-nav__link"
                      id="Label-{{ parent_index }}-{{ forloop.index }}"
                      {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                        {{ childlink.title }}
                    </a>
                    <div class="mobile-nav__toggle">
                      <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-expanded="false">
                        <span class="icon-fallback-text mobile-nav__toggle-open">
                          <span class="icon icon-plus" aria-hidden="true"></span>
                          <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
                        </span>
                        <span class="icon-fallback-text mobile-nav__toggle-close">
                          <span class="icon icon-minus" aria-hidden="true"></span>
                          <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
                        </span>
                      </button>
                    </div>
                  </div>
                  <ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
                    {% for grandchildlink in childlink.links %}
                      <li class="mobile-nav__item">
                        <a
                          href="{{ grandchildlink.url }}"
                          class="mobile-nav__link"
                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
                            {{ grandchildlink.title | escape }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </li>
                {% else %}
                <li class="mobile-nav__item">
                  <a
                    href="{{ childlink.url }}"
                    class="mobile-nav__link"
                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
                      {{ childlink.title | escape }}
                  </a>
                </li>
                {% endif %}
              {% endfor %}
            </ul>
          </li>

          {% else %}

          <li class="mobile-nav__item">
            <a
              href="{{ link.url }}"
              class="mobile-nav__link"
              {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                {{ link.title | escape }}
            </a>
          </li>

        {% endif %}
      {% endfor %}
      {% comment %}
        Spacer element
      {% endcomment %}
      <li class="mobile-nav__spacer"></li>

      {% comment %}
        If customer accounts are enabled, provide login and create account links
      {% endcomment %}
      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          <li class="mobile-nav__item mobile-nav__item--secondary">
            <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
          </li>
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.log_out' | t | customer_logout_link }}
          </li>
        {% else %}
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.log_in' | t | customer_login_link }}
          </li>
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.create_account' | t | customer_register_link }}
          </li>
        {% endif %}
      {% endif %}
      {% for link in linklists[section.settings.drawer_bottom_link_list].links %}
        <li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    </ul>
    <!-- //mobile-nav -->
    <ul class="no-bullets social-icons">
              {% if settings.social_facebook_link != blank %}
                <li>
                  <a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                    <span class="icon icon-facebook" aria-hidden="true"></span>
                    Facebook
                  </a>
                </li>
              {% endif %}
              {% if settings.social_twitter_link != blank %}
                <li>
                  <a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                    <span class="icon icon-twitter" aria-hidden="true"></span>
                    Twitter
                  </a>
                </li>
              {% endif %}
              {% if settings.social_pinterest_link != blank %}
                <li>
                  <a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                    <span class="icon icon-pinterest" aria-hidden="true"></span>
                    Pinterest
                  </a>
                </li>
              {% endif %}
              {% if settings.social_instagram_link != blank %}
                <li>
                  <a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                    <span class="icon icon-instagram" aria-hidden="true"></span>
                    Instagram
                  </a>
                </li>
              {% endif %}
              {% if settings.social_snapchat_link != blank %}
                <li>
                  <a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                    <span class="icon icon-snapchat" aria-hidden="true"></span>
                    Snapchat
                  </a>
                </li>
              {% endif %}
              {% if settings.social_google_plus_link != blank %}
                <li>
                  <a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                    <span class="icon icon-google_plus" aria-hidden="true"></span>
                    Google Plus
                  </a>
                </li>
              {% endif %}
              {% if settings.social_tumblr_link != blank %}
                <li>
                  <a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                    <span class="icon icon-tumblr" aria-hidden="true"></span>
                    Tumblr
                  </a>
                </li>
              {% endif %}
              {% if settings.social_youtube_link != blank %}
                <li>
                  <a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                    <span class="icon icon-youtube" aria-hidden="true"></span>
                    YouTube
                  </a>
                </li>
              {% endif %}
              {% if settings.social_vimeo_link != blank %}
                <li>
                  <a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                    <span class="icon icon-vimeo" aria-hidden="true"></span>
                    Vimeo
                  </a>
                </li>
              {% endif %}
              {% if settings.social_fancy_link != blank %}
                <li>
                  <a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                    <span class="icon icon-fancy" aria-hidden="true"></span>
                    Fancy
                  </a>
                </li>
              {% endif %}
            </ul>
  </div>

add css theme.scss bottom

@media screen and (max-width: 768px) {
  .mobile-nav + ul.no-bullets.social-icons {
    display: flex;
    position: absolute;
    bottom: 0;
    justify-content: center;
    left: 0;
    right: 0;
	}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

lslelegance
Trailblazer
229 2 49

@KetanKumar can u assist maybe please

Zworthkey
Shopify Partner
5581 642 1575

@lslelegance 
Welcome to Shopify Community,
You can add it by the custom Code.

For that you have to hire a developer.

Thank you.

KetanKumar
Shopify Partner
36927 3642 11995

This is an accepted solution.

@lslelegance 

can you please share mobile menu code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lslelegance
Trailblazer
229 2 49

where is mobile menu found please ? 

KetanKumar
Shopify Partner
36927 3642 11995

This is an accepted solution.

@lslelegancethanks for assint

i have done this please check also someone some issue ty ths code

drawer-menu.liquid

  <div class="drawer__inner drawer-left__inner">

    {% if section.settings.drawer_search_enable %}
      {% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
    {% endif %}

    <ul class="mobile-nav">
      {% for link in linklists[section.settings.main_menu_link_list].links %}
        {% if link.links != blank %}
          <li class="mobile-nav__item">
            <div class="mobile-nav__has-sublist">
              <a
                href="{{ link.url }}"
                class="mobile-nav__link"
                id="Label-{{ forloop.index }}"
                {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>{{ link.title | escape }}</a>
              <div class="mobile-nav__toggle">
                <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
                  <span class="icon-fallback-text mobile-nav__toggle-open">
                    <span class="icon icon-plus" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
                  </span>
                  <span class="icon-fallback-text mobile-nav__toggle-close">
                    <span class="icon icon-minus" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
                  </span>
                </button>
              </div>
            </div>
            <ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
              {% assign parent_index = forloop.index %}
              {% for childlink in link.links %}
                {% if childlink.links != blank %}
                <li class="mobile-nav__item">
                  <div class="mobile-nav__has-sublist">
                    <a
                      href="{{ childlink.url }}"
                      class="mobile-nav__link"
                      id="Label-{{ parent_index }}-{{ forloop.index }}"
                      {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                        {{ childlink.title }}
                    </a>
                    <div class="mobile-nav__toggle">
                      <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-expanded="false">
                        <span class="icon-fallback-text mobile-nav__toggle-open">
                          <span class="icon icon-plus" aria-hidden="true"></span>
                          <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
                        </span>
                        <span class="icon-fallback-text mobile-nav__toggle-close">
                          <span class="icon icon-minus" aria-hidden="true"></span>
                          <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
                        </span>
                      </button>
                    </div>
                  </div>
                  <ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
                    {% for grandchildlink in childlink.links %}
                      <li class="mobile-nav__item">
                        <a
                          href="{{ grandchildlink.url }}"
                          class="mobile-nav__link"
                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
                            {{ grandchildlink.title | escape }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </li>
                {% else %}
                <li class="mobile-nav__item">
                  <a
                    href="{{ childlink.url }}"
                    class="mobile-nav__link"
                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
                      {{ childlink.title | escape }}
                  </a>
                </li>
                {% endif %}
              {% endfor %}
            </ul>
          </li>

          {% else %}

          <li class="mobile-nav__item">
            <a
              href="{{ link.url }}"
              class="mobile-nav__link"
              {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                {{ link.title | escape }}
            </a>
          </li>

        {% endif %}
      {% endfor %}
      {% comment %}
        Spacer element
      {% endcomment %}
      <li class="mobile-nav__spacer"></li>

      {% comment %}
        If customer accounts are enabled, provide login and create account links
      {% endcomment %}
      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          <li class="mobile-nav__item mobile-nav__item--secondary">
            <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
          </li>
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.log_out' | t | customer_logout_link }}
          </li>
        {% else %}
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.log_in' | t | customer_login_link }}
          </li>
          <li class="mobile-nav__item mobile-nav__item--secondary">
            {{ 'layout.customer.create_account' | t | customer_register_link }}
          </li>
        {% endif %}
      {% endif %}
      {% for link in linklists[section.settings.drawer_bottom_link_list].links %}
        <li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    </ul>
    <!-- //mobile-nav -->
    <ul class="no-bullets social-icons">
              {% if settings.social_facebook_link != blank %}
                <li>
                  <a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                    <span class="icon icon-facebook" aria-hidden="true"></span>
                    Facebook
                  </a>
                </li>
              {% endif %}
              {% if settings.social_twitter_link != blank %}
                <li>
                  <a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                    <span class="icon icon-twitter" aria-hidden="true"></span>
                    Twitter
                  </a>
                </li>
              {% endif %}
              {% if settings.social_pinterest_link != blank %}
                <li>
                  <a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                    <span class="icon icon-pinterest" aria-hidden="true"></span>
                    Pinterest
                  </a>
                </li>
              {% endif %}
              {% if settings.social_instagram_link != blank %}
                <li>
                  <a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                    <span class="icon icon-instagram" aria-hidden="true"></span>
                    Instagram
                  </a>
                </li>
              {% endif %}
              {% if settings.social_snapchat_link != blank %}
                <li>
                  <a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                    <span class="icon icon-snapchat" aria-hidden="true"></span>
                    Snapchat
                  </a>
                </li>
              {% endif %}
              {% if settings.social_google_plus_link != blank %}
                <li>
                  <a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                    <span class="icon icon-google_plus" aria-hidden="true"></span>
                    Google Plus
                  </a>
                </li>
              {% endif %}
              {% if settings.social_tumblr_link != blank %}
                <li>
                  <a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                    <span class="icon icon-tumblr" aria-hidden="true"></span>
                    Tumblr
                  </a>
                </li>
              {% endif %}
              {% if settings.social_youtube_link != blank %}
                <li>
                  <a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                    <span class="icon icon-youtube" aria-hidden="true"></span>
                    YouTube
                  </a>
                </li>
              {% endif %}
              {% if settings.social_vimeo_link != blank %}
                <li>
                  <a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                    <span class="icon icon-vimeo" aria-hidden="true"></span>
                    Vimeo
                  </a>
                </li>
              {% endif %}
              {% if settings.social_fancy_link != blank %}
                <li>
                  <a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                    <span class="icon icon-fancy" aria-hidden="true"></span>
                    Fancy
                  </a>
                </li>
              {% endif %}
            </ul>
  </div>

add css theme.scss bottom

@media screen and (max-width: 768px) {
  .mobile-nav + ul.no-bullets.social-icons {
    display: flex;
    position: absolute;
    bottom: 0;
    justify-content: center;
    left: 0;
    right: 0;
	}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lslelegance
Trailblazer
229 2 49

Thank you so much !