<div class="site-menu">
    <div class="site-menu__inner">

        <a class="a-btn site-menu__hamburger" aria-label="Elit et Exercitation">
            <span class="a-btn__bar"></span>
            <span class="a-btn__bar"></span>
            <span class="a-btn__bar"></span>
        </a>

        <nav class="site-menu__list">
            <a class="site-menu__link" href="#">Shop By Category</a>
            <a class="site-menu__link" href="#">Room Planner</a>
            <a class="site-menu__link" href="#">Deals</a>
        </nav>
    </div>
</div>
<div class="site-menu">
    <div class="site-menu__inner">
        {% render '@button--bars', hamburger, true %}
        <nav class="site-menu__list">
            {% for link in links -%}
            <a class="site-menu__link" href="{{link.href}}">{{link.text}}</a>
            {% endfor -%}
        </nav>
    </div>
</div>
{
  "hamburger": {
    "modifierClasses": "site-menu__hamburger"
  },
  "links": [
    {
      "href": "#",
      "text": "Shop By Category"
    },
    {
      "href": "#",
      "text": "Room Planner"
    },
    {
      "href": "#",
      "text": "Deals"
    }
  ]
}
  • Content:
    .site-menu {
        $this: &;
    
        margin-inline: rem(15px);
        padding-inline: rem(12px);
    
        &__inner {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
        }
    
        &__hamburger {
            @include media-lg-up {
                display: none;
            }
        }
    
        &__list {
            display: none;
    
            @include media-lg-up {
                display: flex;
            }
        }
    
        &__link {
            color: $color-primary-text;
            display: block;
            font-size: rem(15px);
            font-weight: 600;
            padding: rem(11.2);
            text-decoration: none;
        }
    }
  • URL: /components/raw/site-menu/site-menu.scss
  • Filesystem Path: source/patterns/molecules/site-menu/site-menu.scss
  • Size: 611 Bytes

No notes defined.