Brooklyn Theme - Centering Logo and Navigation Bar

Tourist
5 0 2

Hello!

I'm trying to move the store logo and nav bar (in Brooklyn Theme) to the centre of the screen, rather than having the logo on the left and the nav bar on the right. I've managed to move the nav bar above the hero slider in the hero.liquid snippet. But now I need to make the header height greater - so that it can accomodate the centered logo and then the centered nav bar below it. Can you please explain how to make a taller header and centre the logo and nav bar within it, with the logo above the nav bar? Hope that makes sense! I can't seem to figure it out searching the forums or elsewhere online. Thanks!

0 Likes
New Member
10 0 0

very interesting. let us know if you figure it out :)

Hot Heads
0 Likes
Tourist
10 0 2

Hey Alexis, did you ever figure this out?

1 Like
Tourist
5 0 2

No not yet!

0 Likes
New Member
2 0 1

I am setting up my shop, have you have managed to solve this ? I want to centre my logo above a centred navigategation bar as well.

0 Likes
New Member
10 0 0

same here. 

Hot Heads
0 Likes
Tourist
5 0 2

HI everyone,

It took a long time and a lot of playing around but I finally managed to do it on my own with my very limited coding skills. I can't remember exactly what I did anymore but basically I started by duplicating the code that crates the header/navigation bar. So you effectively have it twice, one above the other (the copied code was pasted right after the original. Then I proceeded to delete the Nav coding out of the top version of the code, and delete the Header coding out of the second duplicated version. Then I had to play around with the various sections and sub sections of code to center and size things.

Check out my website www.les-sublimes.com and inspect the element / page source. That should reveal what I have done better than I can explain it. And don't forget to save a copy of your code before starting in case things go a little wonky in the beginning.

Good luck! Hope this helps!

2 Likes
Highlighted
New Member
9 0 0

Alexis,

You're site looks amazing! I almost broke my site trying to fiddle with the code though T.T

Could anyone offer any help with my site? http://www.thecornershop.co/

I don't know how to move the code around with messing up the mobile - or just the entire site altogether. Really, ANY insight would be appreciated.

 

Thanks in advance!

 

Here's my theme.liquid code:

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>

  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  

  {% if settings.favicon_enable %}
  <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->
  <title>
  {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  <!-- Helpers ================================================== -->
  {% include 'social-meta-tags' %}
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_primary }}">
  <meta name="p:domain_verify" content="9c7c5d81846e63ccf6ebae124fae7aec"/>

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {% include 'google-fonts' %}

  <!-- Header hook for plugins ================================================== -->
  {{ content_for_header }}
  {% include 'oldIE-js' %}

  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
  {{ 'modernizr.min.js' | asset_url | script_tag }}

  {% comment %}
    If you store has customer accounts disabled, you can remove the following JS file
  {% endcomment %}
  {% if template contains 'customers' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
  {% endif %}

</head>

{% comment %}
  Add the page template as a class for easy page or template specific styling.
{% endcomment %}
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}">

  <div id="NavDrawer" class="drawer drawer--left">
    <div class="drawer__fixed-header">
      <div class="drawer__header">
        <div class="drawer__close drawer__close--left">
          <button type="button" class="icon-fallback-text drawer__close-button js-drawer-close">
            <span class="icon icon-x" aria-hidden="true"></span>
            <span class="fallback-text">{{ 'general.drawers.close_menu' | t }}</span>
          </button>
        </div>
      </div>
    </div>
    <div class="drawer__inner">

      {% comment %}
        Remove comment tags below to add a search box at the top of your pull-out menu.
      {% endcomment %}

      
      {% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
      

      <!-- begin mobile-nav -->
      <ul class="mobile-nav">
        {% for link in linklists.main-menu.links %}
          {% comment %}
            Create a dropdown menu by naming a linklist the same as a link in the parent nav

            More info on dropdowns:
              - http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
          {% endcomment %}
          {% assign child_list_handle = link.title | handleize %}
          {% if linklists[child_list_handle].links != blank %}
            <li class="mobile-nav__item{% unless template == 'index' %}{% if link.active %} mobile-nav__item--active{% endif %}{% endunless %}">
              <div class="mobile-nav__has-sublist">
                <a href="{{ link.url }}" class="mobile-nav__link" id="Label-{{ child_list_handle }}">{{ link.title }}</a>
                <div class="mobile-nav__toggle">
                  <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" data-aria-controls="Linklist-{{ child_list_handle }}">
                    <span class="icon-fallback-text mobile-nav__toggle-open">
                      <span class="icon icon-plus" aria-hidden="true"></span>
                      <span class="fallback-text">Expand submenu</span>
                    </span>
                    <span class="icon-fallback-text mobile-nav__toggle-close">
                      <span class="icon icon-minus" aria-hidden="true"></span>
                      <span class="fallback-text">Collapse submenu</span>
                    </span>
                  </button>
                </div>
              </div>
              <ul class="mobile-nav__sublist" id="Linklist-{{ child_list_handle }}" aria-labelledby="Label-{{ child_list_handle }}" role="navigation">
                {% for childlink in linklists[child_list_handle].links %}
                  <li class="mobile-nav__item{% unless template == 'index' %}{% if childlink.active %} mobile-nav__item--active{% endif %}{% endunless %}">
                    <a href="{{ childlink.url }}" class="mobile-nav__link">{{ childlink.title | escape }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
          {% else %}
            <li class="mobile-nav__item{% unless template == 'index' %}{% if link.active %} mobile-nav__item--active{% endif %}{% endunless %}">
              <a href="{{ link.url }}" class="mobile-nav__link">{{ link.title }}</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="/account">{{ '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>
            {% if shop.customer_accounts_optional %}
            <li class="mobile-nav__item mobile-nav__item--secondary">
              {{ 'layout.customer.create_account' | t | customer_register_link }}
            </li>
            {% endif %}
          {% endif %}
        {% endif %}
        {% for link in linklists.footer.links %}
          <li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
      <!-- //mobile-nav -->
    </div>
  </div>
  <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-footer">
    <div class="drawer__fixed-header">
      <div class="drawer__header">
        <div class="drawer__title">{{ 'cart.general.title' | t }}</div>
        <div class="drawer__close">
          <button type="button" class="icon-fallback-text drawer__close-button js-drawer-close">
            <span class="icon icon-x" aria-hidden="true"></span>
            <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span>
          </button>
        </div>
      </div>
    </div>
    <div class="drawer__inner">
      <div id="CartContainer" class="drawer__cart"></div>
    </div>
  </div>

  <div id="PageContainer" class="is-moved-by-drawer">

    <div class="header-wrapper">
      <header class="site-header" role="banner">
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide one-quarter">
              <div class="site-nav--mobile">
                <button type="button" class="icon-fallback-text site-nav__link js-drawer-open-left" aria-controls="NavDrawer">
                  <span class="icon icon-hamburger" aria-hidden="true"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
              </div>
            </div>
            <div class="grid__item large--one-third medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if template == 'index' %}
                <h1 class="site-header__logo large--center" itemscope itemtype=";
              {% else %}
                <div class="h1 site-header__logo large--center" itemscope itemtype=";
              {% endif %}
                {% if settings.logo_use_image %}
                  {% comment %}
                    .logo--has-inverted is only applied to the default logo if the inverted logo exists. That way it'll only be hidden on the slider when it has a backup.
                  {% endcomment %}
                  {% assign logo_inverted_url = 'logo-inverted.png' | asset_url %}
                  <a href="/" itemprop="url" class="site-header__logo-link{% if settings.logo_use_inverted %} logo--has-inverted{% endif %}">
                    <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
                  </a>
                  {% if settings.logo_use_inverted %}
                    <a href="/" itemprop="url" class="logo--inverted">
                      <img src="{{ 'logo-inverted.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
                    </a>
                  {% endif %}
                {% else %}
                  <a href="/" itemprop="url">{{ shop.name }}</a>
                {% endif %}
              {% if template == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <div class="grid__item large--two-thirds large--text-right medium-down--hide">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                <li class="site-nav__item site-nav--compress__menu">
                  <button type="button" class="icon-fallback-text site-nav__link site-nav__link--icon js-drawer-open-left" aria-controls="NavDrawer">
                    <span class="icon icon-hamburger" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                  </button>
                </li>
                {% for link in linklists.main-menu.links %}
                  {% comment %}
                    Create a dropdown menu by naming a linklist the same as a link in the parent nav

                    More info on dropdowns:
                      - http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
                  {% endcomment %}
                  {% assign child_list_handle = link.title | handleize %}
                  {% if linklists[child_list_handle].links != blank %}
                    <li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown{% unless template == 'index' %}{% if link.active %} site-nav--active{% endif %}{% endunless%}" aria-haspopup="true">
                      <a href="{{ link.url }}" class="site-nav__link">
                        {{ link.title }}
                        <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul class="site-nav__dropdown text-left">
                        {% for childlink in linklists[child_list_handle].links %}
                          <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                            <a href="{{ childlink.url }}" class="site-nav__dropdown-link">{{ childlink.title | escape }}</a>
                          </li>
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item site-nav__expanded-item{% unless template == 'index' %}{% if link.active %} site-nav--active{% endif %}{% endunless%}">
                      <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item">
                    <a class="site-nav__link site-nav__link--icon" href="/account">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                {% comment %}
                Uncomment code below to add a search icon

                Change search_modal to true if you'd prefer the search icon
                to toggle a modal ('popup') instead of linking to the search page.
                {% endcomment %}

                
                {% assign search_modal = true %}
                <li class="site-nav__item">
                  <a href="/search" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                    <span class="icon-fallback-text">
                      <span class="icon icon-search" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                    </span>
                  </a>
                </li>
                

                <li class="site-nav__item">
                  <a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </div>
            <div class="grid__item large--hide one-quarter">
              <div class="site-nav--mobile text-right">
                <a href="/cart" class="site-nav__link cart-link js-drawer-open-right" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

          {% comment %}
            Remove comment tags below to add a search box to your header.
          {% endcomment %}

          {% comment %}
          <div class="grid--full large--right medium-down--hide ">
            {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
          </div>
          {% endcomment %}

        </div>
      </header>
    </div>

    <main class="main-content" role="main">
      <div class="wrapper">
        {{ content_for_layout }}
      </div>
    </main>

    {% if settings.footer_newsletter_enable %}
      <div class="newsletter">
        <div class="wrapper">
          {% comment %}

            MailChimp is the go-to newsletter service for Shopify.
            Use the link below to find your MailChimp "form action"
            and insert it in your site settings.

            MailChimp newsletter integration and requirement:
             - http://docs.shopify.com/support/configuration/store-customization/where-do-i-get-my-mailchimp-form-a...

          {% endcomment %}
          {% if settings.newsletter_form_action != blank %}
            {% assign form_action = settings.newsletter_form_action %}
          {% else %}
            {% assign form_action = '#' %}
          {% endif %}
          <form action="{{ form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
            <label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
            <div class="input-group">
              <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="EMAIL" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
              <span class="input-group-btn">
                <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
                  <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
                  <span class="newsletter__submit-text--small">&rarr;</span>
                </button>
              </span>
            </div>
          </form>
        </div>
      </div>
    {% endif %}

    <hr class="hr--large">
    <footer class="site-footer small--text-center" role="contentinfo">
      <div class="wrapper">

        <div class="grid-uniform">

          {% comment %}
            Default to 1 footer column (copyright/powered_by/payment_types)
          {% endcomment %}
          {% assign num_footer_columns = 1 %}

          {% comment %}
            Create an extra menu column if link list has more than 5 links
          {% endcomment %}
          {% if linklists.footer.links.size > 0 %}
            {% comment %}
              We have a Footer menu that isn't empty, we will need another column
            {% endcomment %}
            {% assign num_footer_columns = num_footer_columns | plus: 1 %}
            {% assign extra_footer_linklist_column = false %}
            {% assign footer_linklist_count = linklists.footer.links.size %}
            {% if footer_linklist_count > 5 %}
              {% assign extra_footer_linklist_column = true %}
              {% comment %}
                We split the links so we'll need another column
              {% endcomment %}
              {% assign num_footer_columns = num_footer_columns | plus: 1 %}
            {% endif %}
            {% comment %}
              If we have an odd amount of links, we need to show 1 more link in 1st column
            {% endcomment %}
            {% assign extra_link = footer_linklist_count | modulo: 2 %}
            {% comment %}
              We start with a 2nd column after first column is filled up.
            {% endcomment %}
            {% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
          {% endif %}

          {% comment %}
            Determine whether there are social links
          {% endcomment %}
          {% assign footer_social_enable = false %}
          {% if
            settings.social_twitter_link != blank
            or settings.social_facebook_link != blank
            or settings.social_pinterest_link != blank
            or settings.social_google_plus_link != blank
            or settings.social_instagram_link != blank
            or settings.social_tumblr_link != blank
            or settings.social_youtube_link != blank
            or settings.social_vimeo_link != blank
            or settings.social_fancy_link != blank
          %}
            {% assign footer_social_enable = true %}
          {% endif %}

          {% comment %}
            Calculate the number of footer columns shown. Default to 1.
          {% endcomment %}
          {% if footer_social_enable %}
            {% assign num_footer_columns = num_footer_columns | plus: 1 %}
          {% endif %}

          {% case num_footer_columns %}
            {% when 0 %}
            {% when 1 %}
              {% assign footer_column_width = '' %}
            {% when 2 %}
              {% assign footer_column_width = 'one-half small--one-whole' %}
            {% when 3 %}
              {% assign footer_column_width = 'one-third small--one-whole' %}
            {% when 4 %}
              {% assign footer_column_width = 'large--one-quarter medium--one-half' %}
          {% endcase %}

          {% if linklists.footer.links.size > 0 %}
            <div class="grid__item {{ footer_column_width }}">
              <ul class="no-bullets site-footer__linklist">
                {% for link in linklists.footer.links %}

          {% comment %}
            Create a second column
          {% endcomment %}
          {% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
              </ul>
            </div>
            <div class="grid__item {{ footer_column_width }}">
              <ul class="no-bullets site-footer__linklist">
          {% endif %}

                  <li><a href="{{ link.url }}">{{ link.title }}</a></li>

                {% endfor %}
              </ul>
            </div>
          {% endif %}

          {% if footer_social_enable %}
            <div class="grid__item {{ footer_column_width }}">
                <ul class="no-bullets social-icons">
                  {% if settings.social_facebook_link != blank %}
                    <li>
                      <a href="{{ settings.social_facebook_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                        <span class="icon icon-facebook" aria-hidden="true"></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' }}">
                        <span class="icon icon-twitter" aria-hidden="true"></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' }}">
                        <span class="icon icon-pinterest" aria-hidden="true"></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' }}">
                        <span class="icon icon-instagram" aria-hidden="true"></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' }}">
                        <span class="icon icon-google" aria-hidden="true"></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' }}">
                        <span class="icon icon-tumblr" aria-hidden="true"></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' }}">
                        <span class="icon icon-youtube" aria-hidden="true"></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' }}">
                        <span class="icon icon-vimeo" aria-hidden="true"></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' }}">
                        <span class="icon icon-fancy" aria-hidden="true"></span>
                        
                      </a>
                    </li>
                  {% endif %}
                </ul>
            </div>
          {% endif %}

          <div class="grid__item {{ footer_column_width }} {% if num_footer_columns == 1 %}text-center{% else %}large--text-right{% endif %}">
            <p>&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>{{ powered_by_link }}</p>
            {% comment %}
            {% unless shop.enabled_payment_types == empty %}
              <ul class="inline-list payment-icons">
                {% for type in shop.enabled_payment_types %}
                  <li>
                    <span class="icon-fallback-text">
                      <span class="icon icon-{{ type }}" aria-hidden="true"></span>
                      <span class="fallback-text">{{ type | replace: '_',' ' }}</span>
                    </span>
                  </li>
                {% endfor %}
              </ul>
            {% endunless %}
            {% endcomment %}
          </div>
        </div>

      </div>
    </footer>

  </div>


  {{ 'fastclick.min.js' | asset_url | script_tag }}
  {{ 'timber.js' | asset_url | script_tag }}
  {{ 'theme.js' | asset_url | script_tag }}

  {% comment %}
    Template-specific js
  {% endcomment %}
  <script>
    {% if newHash %}
      $(function() {
        timber.updateHash('{{ newHash }}');
      });
    {% endif %}
    {% if resetPassword %}
      $(function() {
        timber.resetPasswordSuccess();
      });
    {% endif %}
  </script>

  {% if template contains 'index' and hero_enabled %}
    {{ 'slick.min.js' | asset_url | script_tag }}
    {{ 'slick-theme.js' | asset_url | script_tag }}
    <script>
      jQuery(function($) {
        slickTheme.init({
          $element     : $('#Hero'),
          $headerClass : $('.header-wrapper'), // absolutely positioned inside $element
          fullscreen   : {{ hero_full_height }},
          parallax     : {{ hero_parallax }}
        });
      });
    </script>
  {% elsif template contains 'product' %}
    {{ 'slick.min.js' | asset_url | script_tag }}
    {{ 'scrolltofixed.min.js' | asset_url | script_tag }}
  {% endif %}

  {% comment %}
    Ajaxify your cart with this plugin.
    Documentation:
      - http://shopify.com/timber#ajax-cart
  {% endcomment %}
  {% if settings.cart_type == 'drawer' %}
    {{ 'handlebars.min.js' | asset_url | script_tag }}
    {% include 'ajax-cart-template' %}
    {{ 'ajax-cart.js' | asset_url | script_tag }}
    <script>
      jQuery(function($) {
        ajaxCart.init({
          formSelector: '#AddToCartForm',
          cartContainer: '#CartContainer',
          addToCartSelector: '#AddToCart',
          enableQtySelectors: true,
          moneyFormat: {{ shop.money_format | json }}
        });
      });
    </script>
  {% endif %}

  {% if settings.product_zoom_enable and template contains 'product' %}
    {{ 'magnific-popup.min.js' | asset_url | script_tag }}
  {% elsif search_modal == true %}
    {{ 'magnific-popup.min.js' | asset_url | script_tag }}
  {% endif %}

  {% if template contains 'article' or template contains 'product' %}
    {% if settings.social_sharing_blog or settings.social_sharing_products %}
      {{ 'social-buttons.js' | asset_url | script_tag }}
    {% endif %}
  {% endif %}

  {% if search_modal == true %}
    <div id="SearchModal" class="mfp-hide">
      {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--modal' %}
    </div>
  {% endif %}

</body>
</html>

 

0 Likes
New Member
1 0 0

Edited: Issue cleared.

0 Likes
New Member
5 0 0

Hi Alexis, 

I tried copying and pasting your code but it didnt seem to work. Could you try and find the snippet and post it here? That would help us greatly, thank you!

0 Likes