Navbar - GiacomoLaw/quickly GitHub Wiki
Quickly features a powerful navbar, which is responsive on mobile.
For the navbar to work, you need both the CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/giacomolaw/[email protected]/dist/main.min.css">
And the JavaScript to collapse and open the navbar.
<script src="https://cdn.jsdelivr.net/gh/giacomolaw/[email protected]/dist/script.min.js"></script>
You'll also need Font Awesome for the icon to work.
Using the navbar is simple.
<div class="nav" id="nav">
<a href="#" class="active">Home</a>
<a href='https://github.com/giacomolaw/quickly' target="_blank">View on GitHub</a>
<a href="https://github.com/GiacomoLaw/quickly/blob/master/README.md" target="_blank">About</a>
<a href="https://github.com/GiacomoLaw/quickly/blob/master/README.md#Installation" target="_blank">Install</a>
<a href="javascript:void(0);" class="icon" onclick="navtoggle()">
<i class="fa fa-bars"></i>
</a>
</div>
Simply wrap you links in the nav
div like the above example. If you want to use the dark mode, you can do so by adding the nav-dark
after nav
.
If you want a link to show as active, append the active
class to that link.