comrade-webflow-menu

CDN:

<script src="https://unpkg.com/comrade-webflow-menu/dist/comrade-webflow-menu.js"></script>

---

JS

new Menu({
    breakpoint: 991,
    offsetTop: 0,
    topBar: true,
    mobileFooterOffsetTop: 0,
    locations: [
        {
            state:'Chicago, IL',
            street: '1492 NW 86th St, Clive, IA 50325',
            link: '#1',
            workTime: 'Mon-Sat: 8am - 7pm;  Sun: 8am - 5pm',
            phone: '[phone]'
        },
        {
            state:'Washington, D.C',
            street: '9999 NW 86th St, Clive, IA 50325',
            link: '#2',
            workTime: 'Mon-Sat: 8am - 4pm;  Sun: 2am - 5pm',
            phone: '[phone]'
        }
    ]
});

---

CSS

:root {
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-ocd-overlay-color: rgba(0, 0, 0, 0.25);
    
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-background: #ebfcf4;
    --mm-spn-font-color: #444;
    
    --mm-back-button-text: 'Return';
    /* attr(data-mm-spn-title); */

}

.mm-spn li:before {
  background-image: url("https://uploads-ssl.webflow.com/60fbde60666f29611dad4ba8/612b4fc50ca5ae8fe07d1709_Arrow%201.svg");
  width: 10px;
  height: 10px;
}

.mm-spn.mm-spn--navbar:before {
  background-image: url("https://uploads-ssl.webflow.com/60fbde60666f29611dad4ba8/612b4fc50ca5ae8fe07d1709_Arrow%201.svg");
  width: 16px;
  height: 14px;
}