Simple Shopify Story-like navigation bar

story-nav.liquid

<style type="text/css">
  {% if section.settings.desktop %}
    /* This section will show on desktop as well */
  {% else %}
    @media screen and (min-width: 750px) {
      #shopify-section-{{section.id}} {
        display: none;
      }
    }
  {% endif %}
  .story-nav {
    overflow: hidden;
    width: 100%;
  }
  .sec-{{ section.id }} {
    background-color: {{ section.settings.background }};
  }
  .story-nav-inner {
    display: flex;
    overflow-x: scroll;
    padding-bottom: 10px;
  }
  .story-nav-item {
    text-align: center;
    position: relative;
  }
  .story-link {
    color: transparent;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .story-image {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 15px;
    border-width: 3px;
    border-style: solid;
    border-color: rgb(var(--gradient-background));
  }
</style>
{% assign block_count = 0 %}
<section class="story-nav-inner sec-{{ section.id }}">
  {% for block in section.blocks %}
    {% assign block_count = block_count | plus: 1 %}
    <article class="story-nav-item" {{ block.shopify_attributes }}>
      <a class="story-link" href="{{ block.settings.link }}">{{ block.settings.title }}</a>
      <div class="story-image" style="background-image:url('{{block.settings.image | img_url }}')">
        
      </div>
      {{ block.settings.title }}
    </article>
  {% endfor %}
</section>

{% if block_count < 5 %}
<style type="text/css">
  .story-nav-inner {
    justify-content: space-evenly;
  }
</style>
{% endif %}
{% schema %}
{
  "name": "CS|Story-Nav",
  "class": "story-nav",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "default": "#fff",
      "label":"Background Color"
    },
    {
      "type": "checkbox",
      "id": "desktop",
      "default": true,
      "label":"Show on Desktop?"
    }
  ],
  "blocks": [
    {
      "type": "story-item",
      "name": "Story Block",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Name",
          "default": "Name",
          "info": "The Title for this Story block"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label":"Background Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "The link for this nav item"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "CS|Story-Nav",
      "blocks": [
        {
          "type": "story-item"
        },
        {
          "type": "story-item"
        },
        {
          "type": "story-item"
        }
      ]
    }
  ]
}
{% endschema %}