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 fancynavbar-expand-lg" data-zanim-lg='{"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":-37},"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="../../index"><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-6'></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 fancynavbar-addon-height" data-zanim-lg='{"from":{"opacity":1,"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="#languageModal" data-bs-toggle="modal"><span class="font-secondary ls fw-black fs-10 d-block">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">homes</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-auto ps-2"><a class="fancy-dropdown-item" href="../../homes/default"> Default</a><a class="fancy-dropdown-item" href="../../homes/bicycle"> Bicycle</a><a class="fancy-dropdown-item" href="../../homes/bigcartel"> Bigcartel</a><a class="fancy-dropdown-item" href="../../homes/cafe"> Cafe</a><a class="fancy-dropdown-item" href="../../homes/digital"> Digital</a><a class="fancy-dropdown-item" href="../../homes/ecommerce"> Ecommerce</a><a class="fancy-dropdown-item" href="../../homes/event"> Event</a><a class="fancy-dropdown-item" href="../../homes/interior"> Interior</a><a class="fancy-dropdown-item" href="../../homes/landing"> Landing</a><a class="fancy-dropdown-item" href="../../homes/promotion"> Promotion</a><a class="fancy-dropdown-item" href="../../homes/software"> Software</a><a class="fancy-dropdown-item" href="../../homes/studio"> Studio</a></div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">pages</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-sm-auto pe-4 ps-2"><a class="fancy-dropdown-item" href="../../pages/404"> 404</a><a class="fancy-dropdown-item" href="../../pages/about"> About</a><a class="fancy-dropdown-item" href="../../pages/blog"> Blog</a><a class="fancy-dropdown-item" href="../../pages/blog-single"> Blog single</a><a class="fancy-dropdown-item" href="../../pages/cart"> Cart</a><a class="fancy-dropdown-item" href="../../pages/casestudy"> Casestudy</a><a class="fancy-dropdown-item" href="../../pages/coming-soon"> Coming soon</a><a class="fancy-dropdown-item" href="../../pages/contact"> Contact</a><a class="fancy-dropdown-item" href="../../pages/one-page"> One page</a><a class="fancy-dropdown-item" href="../../pages/portfolio"> Portfolio</a></div>
<div class="col-sm-auto pe-4"><a class="fancy-dropdown-item" href="../../pages/profile"> Profile</a><a class="fancy-dropdown-item" href="../../pages/rtl"> RTL</a><a class="fancy-dropdown-item" href="../../pages/services"> Services</a><a class="fancy-dropdown-item" href="../../pages/shop"> Shop</a><a class="fancy-dropdown-item" href="../../pages/signin"> Signin</a><a class="fancy-dropdown-item" href="../../pages/signup"> Signup</a><a class="fancy-dropdown-item" href="../../pages/product-single"> Product single</a><a class="fancy-dropdown-item" href="../../pages/split-static"> Split static</a><a class="fancy-dropdown-item" href="../../pages/split-youtube"> Split youtube</a><a class="fancy-dropdown-item" href="../../pages/starter"> Starter</a></div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">components</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-2 pt-3">
<div class="col-sm-auto mb-3">
<div class="row">
<div class="col-sm-auto pe-4 ps-2"><a class="fancy-dropdown-title fw-black ls fs-10 mb-1" href="JavaScript:void(0)">Sparrow</a><a class="fancy-dropdown-item" href="../../components/sparrow/accordion"> Accordion</a><a class="fancy-dropdown-item" href="../../components/sparrow/anchor"> Anchor</a><a class="fancy-dropdown-item" href="../../components/sparrow/backgrounds"> Backgrounds</a><a class="fancy-dropdown-item" href="../../components/sparrow/borders"> Borders</a><a class="fancy-dropdown-item" href="../../components/sparrow/carousel"> Carousel</a><a class="fancy-dropdown-item" href="../../components/sparrow/colors"> Colors</a><a class="fancy-dropdown-item" href="../../components/sparrow/cookie-notice"> Cookie notice</a><a class="fancy-dropdown-item" href="../../components/sparrow/countdown"> Countdown</a><a class="fancy-dropdown-item" href="../../components/sparrow/countup"> Countup</a><a class="fancy-dropdown-item" href="../../components/sparrow/fancynav"> Fancynav</a><a class="fancy-dropdown-item" href="../../components/sparrow/filter"> Filter</a></div>
<div class="col-sm-auto pe-4"><a class="fancy-dropdown-item" href="../../components/sparrow/googlemap"> Googlemap</a><a class="fancy-dropdown-item" href="../../components/sparrow/icons"> Icons</a><a class="fancy-dropdown-item" href="../../components/sparrow/inline-player"> Inline player</a><a class="fancy-dropdown-item" href="../../components/sparrow/lightbox"> Lightbox</a><a class="fancy-dropdown-item" href="../../components/sparrow/masonry"> Masonry</a><a class="fancy-dropdown-item" href="../../components/sparrow/parallax"> Parallax</a><a class="fancy-dropdown-item" href="../../components/sparrow/progressbar"> Progressbar</a><a class="fancy-dropdown-item" href="../../components/sparrow/spacing"> Spacing</a><a class="fancy-dropdown-item" href="../../components/sparrow/typed-text"> Typed text</a><a class="fancy-dropdown-item" href="../../components/sparrow/typography"> Typography</a><a class="fancy-dropdown-item" href="../../components/sparrow/zanimation"> Zanimation</a></div>
</div>
</div>
<div class="col-sm-auto pe-3 mb-3 ps-2"><a class="fancy-dropdown-title fw-black ls fs-10 mb-1" href="JavaScript:void(0)">Bootstrap</a><a class="fancy-dropdown-item" href="../../components/bootstrap/badges"> Badges</a><a class="fancy-dropdown-item" href="../../components/bootstrap/buttons"> Buttons</a><a class="fancy-dropdown-item" href="../../components/bootstrap/cards"> Cards</a><a class="fancy-dropdown-item" href="../../components/bootstrap/forms"> Forms</a><a class="fancy-dropdown-item" href="../../components/bootstrap/modals"> Modals</a><a class="fancy-dropdown-item" href="../../components/bootstrap/navbar"> Navbar</a><a class="fancy-dropdown-item" href="../../components/bootstrap/scrollspy"> Scrollspy</a><a class="fancy-dropdown-item" href="../../components/bootstrap/sizing"> Sizing</a><a class="fancy-dropdown-item" href="../../components/bootstrap/tables"> Tables</a><a class="fancy-dropdown-item" href="../../components/bootstrap/tabs"> Tabs</a><a class="fancy-dropdown-item" href="../../components/bootstrap/tooltips"> Tooltips</a></div>
</div>
</div>
</li>
<li class="fancynav-item fancy-dropdown"><a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)"><span class="fancynav-link-content">documentation</span></a>
<div class="fancy-dropdown-menu">
<div class="row pb-4 pt-3">
<div class="col-auto ps-2"><a class="fancy-dropdown-item" href="../../documentation/getting-started"> Getting started</a><a class="fancy-dropdown-item" href="../../documentation/file-structure"> File structure</a><a class="fancy-dropdown-item" href="../../documentation/customization"> Customization</a><a class="fancy-dropdown-item" href="../../documentation/gulp"> Gulp</a><a class="fancy-dropdown-item" href="../../documentation/rtl"> RTL</a><a class="fancy-dropdown-item" href="../../documentation/plugins"> Plugins</a><a class="fancy-dropdown-item" href="../../documentation/changelog"> Changelog</a></div>
</div>
</div>
</li>
<li class="fancynav-item"><a class="fancynav-link" href="../../pages/portfolio"><span class="fancynav-link-content">portfolio</span></a></li>
<li class="fancynav-item"><a class="fancynav-link" href="../../pages/contact"><span class="fancynav-link-content">contact</span></a></li>
</ul>
</div>
</nav>Available Options
Responsive behavior
Sparrow use .fancynavbar-expand{-sm|-md|-lg|-xl} classes to decide when the navbar vertical will expand or not.
<nav class="fancynavbar fancynavbar-expand-sm"></nav>
<nav class="fancynavbar fancynavbar-expand-md"></nav>
<nav class="fancynavbar fancynavbar-expand-lg"></nav>
<nav class="fancynavbar fancynavbar-expand-xl"></nav>Fancynavbar Colors:
You can customize Fancynav with both SCSS and CSS variables according to your requirements.
Customize with SCSS variables:
To customize the fancynavbar, using SCSS variables, add the following variables in _user-variables.scss and update according to your requirement.
$fancynav-togglerbar-bg: #ffffff;
$fancynav-collapse-bg: #ffffff;
$fancynav-link-color: #000000;Customize with CSS variables:
To customize the fancynavbar, using CSS variables, add the following variables in user.scss and update according to your requirement.
--sparrow-fancynav-togglerbar-bg: #ffffff;
--sparrow-fancynav-collapse-bg: #ffffff;
--sparrow-fancynav-link-color: #000000;Fancynavbar Position:
By default, we position the fancynavbar on the right side of the window. But you can move the fancynavbar to the left or top if you like.
Position Left:
To move the fancynavbar to the left side of the window, use .has-sidemenu-left with the <html> 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 on the cafe page .
<html class="has-sidemenu has-sidemenu-left" dir="ltr" lang="en-US">
<!-- Your content goes here-->
</html><nav class="fancynavbar fancynavbar-expand-lg fancynavbar-left">...</nav>Position Top:
To move the fancynavbar to the top side of the window, use .has-fancynav-top with the <html> tag and class fancynavbar-top with the .fancynavbar. You can also see the top navigation layout in action on the ecommerce page.
<html class="has-sidemenu has-fancynav-top" dir="ltr" lang="en-US">
<!-- Your content goes here-->
</html><nav class="fancynavbar fancynavbar-expand-lg fancynavbar-top">...</nav>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"></div>One Page FancyNav
If you want to create a basic one page navigation with fancynavbar that scrolls to a specific section of the page, use data-one-page on the list
<ul class="fancynavbar-nav">
<li class="fancynav-item" data-one-page="data-one-page">
<a class="fancynav-link" href="#home">
<span class="fancynav-link-content">Home</span>
</a>
</li>
<li class="fancynav-item" data-one-page="data-one-page">
<a class="fancynav-link" href="#about">
<span class="fancynav-link-content">About</span>
</a>
</li>
</ul>One Page Fancynavbar With Dropdown Item
To enable one-page scrolling for a dropdown item, add the data-one-page attribute to the .fancy-dropdown-item element. See the example below:
<ul class="fancynavbar-nav">
<!-- Other list items-->
<li class="fancynav-item fancy-dropdown" data-one-page="data-one-page">
<a class="fancynav-link fancy-dropdown-toggle" href="JavaScript:void(0)">
<span class="fancynav-link-content">Pages</span>
</a>
<div class="fancy-dropdown-menu">
<a class="fancy-dropdown-item" href="#profile" data-one-page="data-one-page">Profile</a>
<a class="fancy-dropdown-item" href="#blog" data-one-page="data-one-page">Blog</a>
</div>
</li>
</ul>Javascript For One Page
Javascript for Fancynavbar has been updated that supports either navlinks only also navlinks with dropdowns.
Exclusive
If you want to allow one dropdown to be opened at a time, use data-exclusive="true" with .fancynavbar eg:
<div class="fancynavbar fancynavbar-expand-lg" data-exclusive="true"></div>