header.html

<style>
    @media only screen and (min-width: 850px) {
        .navbar-brand {
            margin-right: 10%;
        }
    }

    .navbar-brand img {
        max-height: 16px;
    }
    body {
        padding-top: 60px;
    }

    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body {
            padding-top: 60px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 991px) {
        body {
            padding-top: 110px;
        }
    }

    @media screen and (min-width: 992px) {
        body {
            padding-top: 60px;
        }
    }

    #btn-copy-store-path {
        display: none;
    }
</style>

<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <!-- Container wrapper -->
    <div class="container-fluid">
        <!-- Navbar brand -->
        <a class="navbar-brand" href="/">
            <img alt="arena logo" src="/static/images/arena-logo-white.png" />
        </a>

        <!-- Toggle button -->
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left links -->
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/scenes">Scenes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/build">Builder</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/programs">Programs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/network">Network</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/files">File Store</a>
                </li>
                <li class="nav-item">
                    <!--https://atlas.conix.io-->
                    <a class="nav-link coming-soon" href="/">ATLAS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://docs.arenaxr.org">Documentation</a>
                </li>
            </ul>
            <!-- Left links -->

            <!-- Navbar dropdown -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" id="btn-copy-store-path"><i class="nav-link fa fa-link" title="Copy Store Path"></i></a>
                </li>

                <!-- Dropdown menu -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="auth-dropdown" role="button"> </a>
                </li>
            </ul>
        </div>
        <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
</nav>
<!-- Navbar -->
<div class="page-header">
    <div class="clearfix"></div>
</div>