Boundless Theme: Sticky header + Cart option to be in the same row

Godzhand
Tourist
19 0 1

Hi, 

I want my sticky header menu to be in the same row with the cart & search bar.

 

Replies 4 (4)
dmwwebartisan
Shopify Partner
9770 2228 3065

@Godzhand 

Please share your store URL & screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Godzhand
Tourist
19 0 1

This is my current header:

Godzhand_1-1637664766328.png

 

 

And I want the 3 sidebar, USD currency, shopping cart, and search bar to be move up 1 row inside the header of Home, Shop, About. So all of them become 1 row instead of its own separate row.

 

My store URL is : godzhand.myshopify.com

 

dmwwebartisan
Shopify Partner
9770 2228 3065

@Godzhand 

Please share your theme zip file becouse this is code customization work .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Godzhand
Tourist
19 0 1

This is theme.liquid

 

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
 {%- render 'layouthub_header' -%}

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <meta name="theme-color" content="{{ settings.color_nav_bg }}">

  {% if settings.favicon %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <link rel="canonical" href="{{ canonical_url }}">

  <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 %}

  {% include 'social-meta-tags' %}
  {% render 'css-variables' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <script>
    window.theme = window.theme || {};
    theme.strings = {
      cartEmpty: {{ 'cart.general.empty' | t | json }},
      savingHtml: {{ 'cart.general.savings_html' | t: price: '[savings]' | json }},
      addToCart: {{ 'products.product.add_to_cart' | t | json }},
      soldOut: {{ 'products.product.sold_out' | t | json }},
      unavailable: {{ 'products.product.unavailable' | t | json }},
      addressError: {{ 'map.address_error' | t | json }},
      addressNoResults: {{ 'map.address_no_results' | t | json }},
      addressQueryLimit: {{ 'map.address_query_limit_html' | t | json }},
      authError: {{ 'map.auth_error_html' | t | json }}
    };
    theme.settings = {
      cartType: {{ settings.cart_type | json }},
      moneyFormat: {{ shop.money_format | json }}
    };
  </script>

  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  {% if request.page_type contains 'customers/' %}
    <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
  {% endif %}

  <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>

  <script src="{{ 'option_selection.js' | shopify_asset_url }}" defer="defer"></script>

  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

  {{ content_for_header }}


  {% render 'shogun-head' %}

<script>
window.mlvedaShopCurrency = "{{ shop.currency }}";
window.shopCurrency = "{{ shop.currency }}";
window.supported_currencies = "{{ settings.mlvedaACS_supportedCurrencies }}";
</script></head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
  <div id="SearchDrawer" class="search-bar drawer drawer--top">
    <div class="search-bar__table">
      <form action="{{ routes.search_url }}" method="get" class="search-bar__table-cell search-bar__form" role="search">
        <div class="search-bar__table">
          <div class="search-bar__table-cell search-bar__icon-cell">
            <button type="submit" class="search-bar__icon-button search-bar__submit">
              <span class="icon icon-search" aria-hidden="true"></span>
              <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
            </button>
          </div>
          <div class="search-bar__table-cell">
            <input type="search" id="SearchInput" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="search-bar__input">
          </div>
        </div>
      </form>
      <div class="search-bar__table-cell text-right">
        <button type="button" class="search-bar__icon-button search-bar__close js-drawer-close">
          <span class="icon icon-x" aria-hidden="true"></span>
          <span class="icon__fallback-text">{{ 'general.search.close_search' | t }}</span>
        </button>
      </div>
    </div>
  </div>
  <div id="NavDrawer" class="drawer drawer--left">
  {% section 'sidebar-menu' %}
  </div>
  <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-footer">
    <div class="drawer__header">
      <div class="drawer__close">
        <button type="button" class="drawer__close-button js-drawer-close">
          <span class="icon icon-x" aria-hidden="true"></span>
          <span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
        </button>
      </div>
    </div>
    <div class="drawer__inner">
      <div id="CartContainer">
      </div>
    </div>
  </div>

  <div id="PageContainer">
    {% section 'announcement-bar' %}

    <div class="site-header-wrapper">
      <div class="site-header-container">
        {% section 'header' %}

        <div class="action-area">
          {%- unless request.page_type == 'product' or request.page_type == 'search' or request.page_type == 'index' -%}
            {% include 'action-bar' %}
          {%- endunless -%}
          {%- if request.page_type == 'search' and search.performed -%}
            <div class="action-bar">
              <div class="search__results-count">
                {{ 'general.search.results_with_count' | t: count: search.results_count, term: search.terms }}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    <main class="main-content{% if request.page_type == blank %} main-content--no-template{% endif %}" role="main">
      <!--LayoutHub-Workspace-Start-->{{ content_for_layout }}<!--LayoutHub-Workspace-End-->
    </main>

    {% section 'footer' %}

  </div>

  {% comment %}
    Enable ajax cart drawer
  {% endcomment %}
  {% if settings.cart_type == 'drawer' %}
    <script id="CartTemplate" type="text/template">
      {% raw %}
        <form action="{% endraw %}{{ routes.cart_url }}{% raw %}" method="post" novalidate class="cart ajaxcart">
          <div class="ajaxcart__inner ajaxcart__inner--has-fixed-footer">
            {{#items}}
            <div class="ajaxcart__row">
              <div class="ajaxcart__product" data-line="{{line}}">
                <div class="grid grid--half-gutters">
                  <div class="grid__item one-quarter">
                    <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
                  </div>
                  <div class="grid__item three-quarters">
                    <div class="ajaxcart__product-name-wrapper">
                      <a href="{{url}}" class="ajaxcart__product-name h4">{{name}}</a>
                      {{#if variation}}
                        <span class="ajaxcart__product-meta">{{variation}}</span>
                      {{/if}}
                      {{#if sellingPlanAllocation}}
                        <span class="ajaxcart__product-meta">{{sellingPlanAllocation.selling_plan.name}}</span>
                      {{/if}}
                      {{#properties}}
                        {{#each this}}
                          {{#if this}}
                            <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
                          {{/if}}
                        {{/each}}
                      {{/properties}}
                    </div>

                    <div class="grid">
                      <div class="grid__item one-half">
                        <div class="ajaxcart__qty">
                          <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}" aria-label="{% endraw %}{{ 'cart.label.reduce_quantity' | t }}{% raw %}">
                            <span class="icon icon-minus" aria-hidden="true"></span>
                            <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
                          </button>
                          <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
                          <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.label.increase_quantity' | t }}{% raw %}">
                            <span class="icon icon-plus" aria-hidden="true"></span>
                            <span class="icon__fallback-text" aria-hidden="true">+</span>
                          </button>
                        </div>
                      </div>
                      <div class="grid__item one-half text-right">
                        {{#if discountsApplied}}
                          <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
                          <del>{{{originalLinePrice}}}</del>
                          <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
                          <span class="order-discount">{{{linePrice}}}</span>
                        {{else}}
                          {{{linePrice}}}
                        {{/if}}
                        {{#if unitPrice}}
                          <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
                          <span class="product-price-unit">
                            {% endraw %}
                              {%- capture unit_price_separator -%}
                                <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                              {%- endcapture -%}
                            {% raw %}
                            <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
                          </span>
                        {{/if}}
                      </div>
                    </div>
                    {{#if discountsApplied}}
                      <div class="grid grid--table">
                        <div class="grid__item text-right">
                          <ul class="order-discount order-discount--list order-discount--title order-discount--cart order-discount--cart-title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
                            {{#each discounts}}
                              <li class="order-discount__item">
                                <span class="icon icon-saletag" aria-hidden="true"></span>{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
                              </li>
                            {{/each}}
                          </ul>
                        </div>
                      </div>
                    {{/if}}
                  </div>
                </div>
              </div>
            </div>
            {{/items}}

            {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
              <div class="ajaxcart__row">
                <label for="CartSpecialInstructions" class="txt--minor">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
                <textarea name="note" class="input-full ajaxcart__note" id="CartSpecialInstructions">{{note}}</textarea>
              </div>
            {% endraw %}{% endif %}{% raw %}
          </div>
          <div class="ajaxcart__footer ajaxcart__footer--fixed">
            <div class="ajaxcart__subtotal">
              {{#if cartDiscountsApplied}}
                <div class="grid grid--table ajaxcart__discounts">
                  {{#each cartDiscounts}}
                    <div class="grid__item two-thirds">
                      <span class="order-discount order-discount--title order-discount--cart-title">
                        <span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}:</span>{{ this.title }}
                      </span>
                    </div>
                    <div class="grid__item one-third text-right">
                      <span class="order-discount">-{{{ this.formattedAmount }}}</span>
                    </div>
                  {{/each}}
                </div>
              {{/if}}
              <div class="grid grid--table">
                <div class="grid__item two-thirds">
                  <span class="ajaxcart__subtotal-title h3">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</span>
                </div>
                <div class="grid__item one-third text-right">
                  <span>{{{totalPrice}}}</span>
                </div>
              </div>
            </div>

            <p class="text-center ajaxcart__policies txt--minor rte">{% endraw %}
              {%- capture taxes_shipping_checkout -%}
                {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- elsif cart.taxes_included -%}
                  {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
                {%- elsif shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                {%- else -%}
                  {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
                {%- endif -%}
              {%- endcapture -%}
              {{ taxes_shipping_checkout }}
            {% raw %}</p>
            <button type="submit" class="btn btn--full cart__checkout" name="checkout">
              {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
            </button>
          </div>
        </form>
      {% endraw %}
    </script>
    <script id="JsQty" type="text/template">
      {% raw %}
        <div class="js-qty">
          <button type="button" class="js-qty__adjust js-qty__adjust--minus" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.label.reduce_quantity' | t }}{% raw %}">
            <span class="icon icon-minus" aria-hidden="true"></span>
            <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
          </button>
          <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
          <button type="button" class="js-qty__adjust js-qty__adjust--plus" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.label.increase_quantity' | t }}{% raw %}">
            <span class="icon icon-plus" aria-hidden="true"></span>
            <span class="icon__fallback-text" aria-hidden="true">+</span>
          </button>
        </div>
      {% endraw %}
    </script>

  {% endif %}
  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
  </ul><script type="text/javascript"  src="https://apiv2.popupsmart.com/api/Bundle/373662" async></script>
{%- render 'layouthub_footer' -%} 
 {% include 'mlveda-currencies-switcher' %}{% include 'mlveda-currencies' %}{% include 'mlveda-flag' %}{% include 'mlveda-currencies-style' %}{% render 'banana-stand-footer' %}
</body>
</html>