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="assetsRuby/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;
See more on customization with SCSS here.

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;
See more on customization with SCSS here.

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">