JustinWDev of Theme Support
9/5/2018 - 4:55 PM

Move the action bar to the top of the slideshow in Boundless

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: ****