To make navbar stick to the top add .navbar-fixed class
While changing the color of navbar make sure to change color of text to match navbar color. we have .navbar-danger .navbar-primary colors for navbars.
make sure when you add colors to nav add .navbar-white-textclass to the texts.
<!-- Desktop only Navbar -->
<nav class="navbar flex flex-wrap flex-between">
<div class="flex flex-space-evenly flex-align-item-center ">
<ul class=" text-deocration-none flex flex-wrap flex-align-item-center gap">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="material-icons snackbar-icons py-1 navbar-icons">menu</span>
</li>
<a href="#" class="text-deocration-none">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="font-bold">Zeplin</span>
</li>
</a>
</ul>
</div>
<div class="flex flex-space-evenly flex-align-item-center ">
<ul class=" text-deocration-none flex flex-wrap gap-col-2">
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="material-icons">search</span>
<span class="">search</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="material-icons">help_outline</span>
<span class="">help</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="material-icons">person</span>
<span class="">user</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text flex flex-align-item-center gap-1">
<span class="material-icons">shopping_bag</span>
<span class="">cart</span>
</li>
</a>
</ul>
</div>
</nav>
<!-- Navbar Danger -->
<nav class="navbar flex flex-wrap flex-between mt-1 navbar-danger">
<div class="flex flex-space-evenly flex-align-item-center ">
<ul class=" text-deocration-none flex flex-wrap flex-align-item-center gap">
<li class="pb-1 nav-text navbar-white-text flex flex-align-item-center gap-1">
<span class="material-icons snackbar-icons py-1 navbar-icons">menu</span>
</li>
<a href="#" class="text-deocration-none">
<li class="pb-1 nav-text navbar-white-text flex flex-align-item-center gap-1">
<span class="font-bold">Zeplin</span>
</li>
</a>
</ul>
</div>
<div class="flex flex-space-evenly flex-align-item-center ">
<ul class=" text-deocration-none flex flex-wrap gap-col-2">
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text navbar-white-text flex flex-align-item-center gap-1">
<span class="material-icons">search</span>
<span class="">search</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text navbar-white-text flex flex-align-item-center gap-1">
<span class="material-icons">help_outline</span>
<span class="">help</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text navbar-white-text flex flex-align-item-center gap-1">
<span class="material-icons">person</span>
<span class="">user</span>
</li>
</a>
<a href="#" class="text-deocration-none" target="_blank" rel="noreferrer">
<li class="pb-1 nav-text flex navbar-white-text flex-align-item-center gap-1">
<span class="material-icons">shopping_bag</span>
<span class="">cart</span>
</li>
</a>
</ul>
</div>
</nav>To Open the sidebar click on check sidebar button it will open on new page.
<!-- Drawer/sidebar -->
<nav class="nav z-index-max">
<div class="flex flex-row nav-logo flex-between flex-align-item-center ">
<div class="sidebar-logo flex flex-align-item-center">
<span class="material-icons icon-nav-menu" id="menu">
menu
</span>
<span class="logo-text">Framer-Ui</span>
</div>
<div class="flex flex-wrap gap">
<a href="https://github.com/mehulsatardekar" target="_blank" rel="noreferrer">
<box-icon name='github' type='logo' color='#eeeded' ></box-icon>
</a>
<a href="https://www.youtube.com/channel/UCOPdSGIn44Gh4QXZH_6U8gQ" target="_blank" rel="noreferrer">
<box-icon name='youtube' type='logo' color='#eeeded' ></box-icon>
</a>
</div>
</div>
<aside class="sidebar-menu flex flex-column flex-between" id="sidebar-menu">
<div class="flex flex-column flex-between mt-1">
<div class="flex flex-between flex-align-item-center ">
<span class="font-mid-bold ml-1 logo-text">Framer-UI</span>
<span class="material-icons mr-1 icon-nav-menu" id="close">close</span>
</div>
<div class="content flex flex-column slider-content-section gap">
<ul class="flex flex-column list-style-none mt-2 gap-1 ">
<a href="../docs/home.html" class="text-deocration-none selected-text">
<li class="sidebar-text">
Get Started
</li>
</a>
<a href="../docs/alert.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='badge-check' type='solid' color='#eeeded' ></box-icon>
<span>Alerts</span>
</li>
</a>
<a href="../docs/avatar.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='user-account' type='solid' color='#eeeded' ></box-icon>
<span>Avatar</span>
</li>
</a>
<a href="../docs/badges.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='badge-check' type='solid' color='#eeeded' ></box-icon>
<span>Badges</span>
</li>
</a>
<a href="../docs/button.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon type='solid' name='plus-square' color='#eeeded'></box-icon>
<span>Buttons</span>
</li>
</a>
<a href="../docs/cards.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='credit-card-front' color='#eeeded' ></box-icon>
<span>Cards</span>
</li>
</a>
<a href="../docs/form.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='food-menu' color='#eeeded'></box-icon>
<span>Forms</span>
</li>
</a>
<a href="../docs/grid.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='grid-alt' type='solid' color='#eeeded' ></box-icon>
<span>Grids</span>
</li>
</a>
<a href="../docs/image.html" class="text-deocration-none selected-text ">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='images' color='#eeeded' ></box-icon>
<span>Images</span>
</li>
</a>
<a href="../docs/list.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='list-ul' color='#eeeded' ></box-icon>
<span>Lists</span>
</li>
</a>
<a href="../docs/modal.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='card' color='#eeeded' ></box-icon>
<span>Modal</span>
</li>
</a>
<a href="../docs/navigation.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='navigation' color='#eeeded' ></box-icon>
<span>Navbars</span>
</li>
</a>
<a href="../docs/rating.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='star-half' type='solid' color='#eeeded' ></box-icon>
<span>Ratings</span>
</li>
</a>
<a href="../docs/toast.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='copy' color='#eeeded' ></box-icon>
<span>Toasts</span>
</li>
</a>
<a href="../docs/typography.html" class="text-deocration-none selected-text">
<li class="sidebar-text flex flex-align-item-center gap-1">
<box-icon name='font-family' color='#eeeded' ></box-icon>
<span>Typography</span>
</li>
</a>
</ul>
</div>
</div>
<div class="flex mt-1 ml-1 flex-align-item-center">
<svg width="40" height="32" viewBox="0 0 40 32" aria-hidden="true">
<mask id="32e25648-9cb3-4aba-a168-64581e7aa254" width="52" height="52">
<circle cx="16" cy="16" r="16" fill="white"></circle>
<rect color="black" x="19" y="19" width="16" height="16" rx="8" ry="8"></rect>
</mask>
<foreignObject x="0" y="0" width="32" height="32" mask="url(#32e25648-9cb3-4aba-a168-64581e7aa254)">
<div class="avatarStack-2Dr8S9"><img
src="https://cdn.discordapp.com/avatars/709733291946672128/63f8ccaab30e072ae3a184ab142ddc54.webp"
alt="user-img" class="avatar-user-icon" aria-hidden="true"></div>
</foreignObject><svg x="14.5" y="17" width="25" height="15" viewBox="0 0 25 15">
<mask id="2b3fa5a7-0ec2-4469-b164-f8d5007235b6">
<rect x="7.5" y="5" width="10" height="10" rx="5" ry="5" fill="white"></rect>
<rect x="12.5" y="10" width="0" height="0" rx="0" ry="0" fill="black"></rect>
<polygon points="-2.16506,-2.5 2.16506,0 -2.16506,2.5" fill="black" transform="scale(0) translate(13.125 10)"
style="transform-origin: 13.125px 10px;">
</polygon>
<circle fill="black" cx="12.5" cy="10" r="0"></circle>
</mask>
<rect fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)" width="25" height="15"
mask="url(#2b3fa5a7-0ec2-4469-b164-f8d5007235b6)"></rect>
</svg>
<rect x="22" y="22" width="10" height="10" fill="transparent" aria-hidden="true" class="pointerEvents-2zdfdO"></rect>
</svg>
<div class="flex flex-column">
<span class="font-white">Made 😎 by Mehul </span>
</div>
</div>
</aside>
</nav><!-- Drawer/sidebar JS -->
const menuIcon = document.querySelector('#menu');
const closeIcon = document.querySelector('#close')
const sidebarMenu = document.querySelector('#sidebar-menu');
menuIcon.addEventListener('click',()=>{
sidebarMenu.classList.remove('hide')
sidebarMenu.classList.toggle('sidebar-menu-width');
})
closeIcon.addEventListener('click',()=>{
sidebarMenu.classList.toggle('hide')
sidebarMenu.classList.remove('sidebar-menu-width')
})