markdown 将操作栏移动到Boundless中幻灯片的顶部

Posted 2021-05-05

**Theme:** Boundless

**Version(s) successfully tested on:** V6.1.1

**Recommended design time:** 5 minutes



----

## What you have
Action bar below the slideshow

![](https://screenshot.click/05-38-5ry6q-t9vu0.png)

## What you want
Action bar above the slideshow and inline with the mobile menu, search and cart icons

![](https://screenshot.click/05-39-m7i4b-hdajn.png)

----

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