diff --git a/docs/nav.html b/docs/nav.html
deleted file mode 100644
index 3f7ba9d..0000000
--- a/docs/nav.html
+++ /dev/null
@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>steevcss</title>
-        <link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
-        <style>
-            .sidebar-wrapper {
-                display: flex;
-            }
-            .sidebar-style {
-                border-right: 1px solid rgba(0, 0, 0, 0.493) ;
-            }
-            .sidebar-left { 
-                padding: 0;
-                margin: 0;
-                margin-left: 0;
-                padding-right: 5px;
-                height: 100%;
-            }
-            .sidebar-menu {
-                width: fit-content;
-            }
-            .sidebar-item {
-                list-style: none;
-                min-width: min-content;
-            }
-            .sidebar-link {
-                width: fit-content;
-                color: #2980b9;
-                text-decoration: none;
-                font-size: 12pt;
-            }
-            .sidebar-content {
-                width: 100%;
-            }
-            .sidebar-title {
-                width: max-content;
-                font-size: 20pt;
-                padding-right: 5px;
-            }
-            .link {
-                color: #2980b9;
-                text-decoration: none;
-                font-size: 12pt;
-            }
-        </style>
-    </head>
-    <body>
-        <header>
-            <h1 class="nav-logo">SteevCSS</h1>
-            <input id="nav-toggle" type="checkbox" class="nav-toggle">
-            <label for="nav-toggle" class="nav-toggle-label">
-                <span></span>
-            </label>
-            <nav>
-                <ul>
-                    <li><a href="/steevcss/">Home</a></li>
-                    <li><a href="/steevcss/docs/index.html">DOCS</a></li>
-                </ul>
-            </nav>
-        </header>
-        <main>
-            <div style="padding-left: 20px; padding-right: 20px;">
-                <div class="sidebar-wrapper">
-                    <div class="sidebar-left sidebar-style">
-                        <h1 class="sidebar-title">Dcoumentation:</h1>
-                        <ul class="sidebar-menu">
-                            <li class="sidebar-item">
-                                <a href="/steevcss/docs/index.html" class="sidebar-link">Home</a>
-                            </li>
-                            <li class="sidebar-item">
-                                <a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
-                            </li>
-                            <li class="sidebar-item">
-                                <a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
-                            </li>
-                            <li class="sidebar-item">
-                                <a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
-                            </li>
-                            <li class="sidebar-item">
-                                <a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="sidebar-content">
-                        <div class="container">
-                            <h1>Navigations</h1>
-                            Here you will get an explanation on how Navigations in steevCSS are implemented<br>
-                            note: these are only exapmples and can be customized to a degree<br>
-                            <br>
-                            <h1>Default Implementation</h1>
-                            Below you find a visual example and the code on how to use it
-                            <header>
-                                <h1 class="nav-logo">LOGO</h1>
-                                <input id="nav-toggle" type="checkbox" class="nav-toggle">
-                                <label for="nav-toggle" class="nav-toggle-label">
-                                    <span></span>
-                                </label>
-                                <nav>
-                                    <ul>
-                                        <li><a href="#">Test</a></li>
-                                        <li><a href="#">Test</a></li>
-                                        <li><a href="#">Test</a></li>
-                                        <li><a href="#">Test</a></li>
-                                        <li><a href="#">Test</a></li>
-                                    </ul>
-                                </nav>
-                            </header>
-                            <pre>
-                                <code class="language-html">
-<header>
-    <h1 class="nav-logo">Logo</h1>
-    <input id="nav-toggle" type="checkbox" class="nav-toggle">
-    <label for="nav-toggle" class="nav-toggle-label">
-        <span></span>
-    </label>
-    <nav>
-        <ul>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-        </ul>
-    </nav>
-</header>
-                                </code>
-                            </pre>
-                            keep in mind this Implementation isnt fixed anywhere in order to do that you will need to assign locked classes as seen Below
-                            <pre>
-                                <code class="language-html">
-<header class="locked-top">
-    <h1 class="nav-logo">Logo</h1>
-    <input id="nav-toggle" type="checkbox" class="nav-toggle">
-    <label for="nav-toggle" class="nav-toggle-label">
-        <span></span>
-    </label>
-    <nav>
-        <ul>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-            <li><a href="#">Test</a></li>
-        </ul>
-    </nav>
-</header>
-                                </code>
-                            </pre>
-                            This change will lock the navbar to stay on top at any point.<br>
-                            This change has been implemented just recently it may still contain unfound bugs<br>
-                            Its recommeneded to keep an eye on this page in order to see changes or additions to the locking system.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <br>
-        </main>
-        <script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-    </body>
-</html>
\ No newline at end of file
