<nav class="text-dark">
        <!-- nav icon -->

        <!-- nav brand  -->
        <div class="nav-brand">
            <img src="../../Xenon.svg" alt="Xenon" />
        </div>

        <!-- nav-item on right side  -->
        <ul class="nav-menu">
            <li>
                <a href="" class="nav-item"> Home </a>
            </li>
            <li>
                <a href="" class="nav-item">About</a>
            </li>
            <li>
                <a href="" class="nav-item">Settings</a>
            </li>
            <li>
                <a href="" class="nav-item">Contact</a>
            </li>
            <li>
                <a href="" class="nav-item">
                    <img class="avatar-xs" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
                </a>
            </li>
        </ul>

        <div id="hamburger" class="hamburger">
            <span class="material-icons md-36"> menu </span>
        </div>

        <div class="responsive-navbar display-navbar">
            <div id="closeNavbar" class="danger-text">
                <span class="material-icons md-36"> close </span>
                Close
            </div>
            <a href="" class="nav-item"> Home </a>
            <a href="" class="nav-item">About</a>
            <a href="" class="nav-item">Settings</a>
            <a href="" class="nav-item">Contact</a>
            <a href="" class="nav-item">
                <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            </a>
        </div>
    </nav>