Responsive Navbar

PHOTO EMBED

Sun Aug 28 2022 14:44:39 GMT+0000 (Coordinated Universal Time)

Saved by @artistole #htm #navbar

<div class="scl-navbar-menu">
    <div class="scl-navbar-items">
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
    </div>
    <div class="scl-hamburger-container">
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
    </div>
</div>
<!-- navbar for phone -->
<aside class="scl-side-bar">
    <div class="scl-navbar-items-phone">
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
    </div>
</aside>
content_copyCOPY