Fancy nav
These modular elements can be readily used and customized in every layout across pages.
Throughout the theme, we have used the side navigation panel. The structure is following:
<nav class="fancynavbar" data-zanim-md='{"from":{"opacity":1,"x":70},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-xs='{"from":{"opacity":1,"y":-48},"to":{"opacity":1,"y":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-trigger="scroll" data-exclusive="true">
<div class="fancynavbar-togglerbar">
<a class="fancynavbar-brand" href="#">
<img class="fancynavbar-brand-img" src="assets/img/logo-sparrow-invert.svg" alt="" width="30" height="30" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll"/>
<!--You can use icon or text logo as well-->
<!--<span class='fab fa-superpowers fs-3'></span>-->
<!--<span class='logo-sparrow'>S</span>-->
</a>
<div class="fancynavbar-toggler">
<svg class="fancynavbar-toggler-icon" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.5}' data-zanim-trigger="scroll">
<path id="path-top" d="M20,25c0,0,22,0,30,0c16,0,18.89,40.71-.15,21.75C38.7,35.65,19.9,16.8,19.9,16.8"></path>
<path id="path-middle" d="M20,32h30"></path>
<path id="path-bottom" d="M19.9,46.98c0,0,18.8-18.85,29.95-29.95C68.89-1.92,66,38.78,50,38.78c-8,0-30,0-30,0"></path>
</svg>
</div>
<div class="fancynavbar-addon" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll">
<a class="fancynavbar-addon-item" href="#"><span class="fab fa-twitter"></span></a>
<a class="fancynavbar-addon-item" href="#" data-remodal-target="language"><span class="text-sans-serif ls font-weight-black fs--1">EN</span></a>
</div>
</div>
<div class="fancynavbar-collapse">
<ul class="fancynavbar-nav">
<li class="fancynav-item fancy-dropdown">
<a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">Dropdown</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4">
<div class="col-auto pt-3">
....
<a class="fancy-dropdown-item" href="#">Dropdown Link 1</a>
<a class="fancy-dropdown-item" href="#">Dropdown Link 2</a>
....
</div>
</div>
</div>
</li>
....
<li class="fancynav-item">
<a class="fancynav-link" href="#"><span class="fancynav-link-content">Nav Link</span></a>
</li>
....
</ul>
</div>
</nav>
Available Options
Togglebar Background
To change the background of the fancynav bar, add the css class for available background colors . eg:
<div class="fancynavbar-togglerbar bg-primary">
Fancynavbar Collapse Background
To change the background of the fancynav collapsible area, add the scss variable $fancynav-collapse-bg in your _user-variables.scss. Example:
$fancynav-collapse-bg: #ff0000;Fancynavbar link color
To change the color of the fancynav links, add the scss variable $fancynav-link-color in your _user-variables.scss. Example:
$fancynav-link-color: #000000;Position
By default, we position the fancynavbar on the right side of the window. To move the fancynavbar to the left side of the window, use has-sidemenu-left with the <body> tag and class
fancynavbar-left with the fancynavbar. This will behave in reverse for the RTL layout. You can see the left navigation layout in action at the
cafe page.
<body class="has-sidemenu has-sidemenu-left">...</body><div class="fancynavbar fancynavbar-left">...</div>
On scroll fade in
To make the background fade in on scroll on mobile/tab devices, like you see in the
event page, use data-onscroll-fade-in="true" eg:
<div class="fancynavbar-togglerbar bg-primary" data-onscroll-fade-in="true">
Exclusive
If you want to allow one dropdown to be opened at a time, use data-exclusive="true" with .fancynavbar eg:
<div class="fancynavbar" data-exclusive="true">