Cacher is the code snippet organizer for pro developers

Theme: Boundless

Version(s) successfully tested on: V6.1.1

Recommended design time: 5 minutes

---

What you have

Action bar below the slideshow

What you want

Action bar above the slideshow and inline with the mobile menu, search and cart icons

---

What you do

Step 1: Open index.liquid

Find the div wrapping the hamburger menu as highlighted below:

<div class="hero-wrapper">
  <div class="hero__site-header">
    <div class="grid grid--no-gutter grid--table site-header__inner">
\!h       <div class="grid__item one-half">
        <button type="button" class="site-header__link text-link site-header__toggle-nav js-drawer-open-left">
          <span class="icon icon-hamburger" aria-hidden="true"></span>

And change it to the following:

<div class="grid__item small--one-half medium--one-half one-tenth">

Repeat this for the search/cart div as highlighted below:

\!h <div class="grid__item one-half text-right">
  <a href="/search" class="site-header__link site-header__search js-drawer-open-top">

Change it to:

<div class="grid__item  small--one-half medium--one-half one-tenth text-right">

Add a line between these to divs and add the following code to insert the action bar section:

<div class="grid__item four-fifths small--hide medium--hide">
  <div class="action-area">
    {% include 'action-bar' %}
  </div>
</div>

Towards the bottom of the file, find and comment out the following code:

<div class="hero__header">
  <div class="action-area">
    {% include 'action-bar' %}
  </div>
</div>

Save the file.

Step 2:

Open theme.scss.liquid and add the following code to have the navbar color consistent

.hero__site-header .site-header__inner {
  background-color: $color-action-bar-bg;
}

---

Additional notes: Completed hero-wrapper div should look like this:

<div class="hero-wrapper">
  <div class="hero__site-header">
    <div class="grid grid--no-gutter grid--table site-header__inner">
\!h      <div class="grid__item small--one-half medium--one-half one-tenth">
        <button type="button" class="site-header__link text-link site-header__toggle-nav js-drawer-open-left">
          <span class="icon icon-hamburger" aria-hidden="true"></span>
          <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
        </button>
      </div>
\!h      <div class="grid__item four-fifths small--hide medium--hide">
\!h        <div class="action-area">
\!h          {% include 'action-bar' %}
\!h        </div>
\!h      </div>  
\!h      <div class="grid__item  small--one-half medium--one-half one-tenth text-right">
        <a href="/search" class="site-header__link site-header__search js-drawer-open-top">
          <span class="icon icon-search" aria-hidden="true"></span>
          <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
        </a>
        <a href="/cart" class="site-header__link site-header__cart cart-link{% if settings.cart_type == 'drawer' %} js-drawer-open-right{% endif %}{% if cart.item_count > 0 %} cart-bubble--visible{% endif %}">
          <span class="icon icon-cart" aria-hidden="true"></span>
          <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
        </a>
      </div>
    </div>
  </div>

  {% section 'slideshow' %}

\!h  {% comment %}Removed by Richard T @ Shopify Theme Support | September 5 2018 {% endcomment %}
  <div class="hero__header">
    <div class="action-area">
      {% include 'action-bar' %}
    </div>
  </div>
\!h  {% endcomment %}
</div>

Alternative keywords: ****