Documentation and examples for Famous UI's powerful, responsive navigation header, the
navbar.
Includes support for branding, navigation, and more.
How it works
Here’s what you need to know before getting started with the navbar.
Navbars require a wrapping .navbar with .expand{-sm|-md|-lg|-xl}
for responsive collapsing and come's with White and Primary Color Navbar.
Navbars and their contents are fluid by default. can use .container or .container-fluid
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior
depends
on FamousUI.js plugin.
Ensure accessibility by using a <nav> element or, if using a more
generic element such as a <div>, add a role="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Basic Navbar
.container-fluid navbar - expanded above .expand-md - 790px
Remove .default-nav to remove default style from the Navbar.
Navbar comes with Two default colors,
.bg-primary
and white color background by Default
Famous UI Navbar works perfectly with Bootstrap Nav-walker For Wordpress.
<!-- DEFAULT WHITE NAVBAR --><navclass="navbar expand-md default-nav"><divclass="container-fluid"><!-- LOGO --><divclass="brand"><ahref="#!">Logo</a></div><!-- NAVBAR --><divclass="menu-box"id="mainNav1"><!-- CLOSE BUTTON | MOBILE--><divclass="menu-close"><iclass="fa fa-close"></i></div><!-- MENU --><ulclass="menu ml-auto"><liclass="nav-item active"><ahref=""class="nav-link">Home</a></li><liclass="nav-item"><ahref=""class="nav-link">Portfolio</a></li><liclass="nav-item"><ahref=""class="nav-link">About</a></li><liclass="nav-item"><ahref=""class="nav-link">Contact</a></li></ul></div><!-- TOGGLER | MOBILE --><buttonclass="toggler bg-primary"data-nav="#mainNav1"><iclass="fa fa-bars"></i></button></div></nav>
Primary Navbar
.container navbar - expanded above .expand-lg - 1160px,
Add .mx-auto | .ml-auto | .mr-auto class on .menu to align menu on Navbar.
<!-- NAVBAR --><navclass="navbar expand-lg default-nav bg-primary"><divclass="container"><!-- LOGO --><divclass="brand"><ahref="#!">Logo</a></div><!-- NAVBAR --><divclass="menu-box"id="mainNav2"><!-- CLOSE BUTTON | MOBILE--><divclass="menu-close"><iclass="fa fa-close"></i></div><!-- MENU --><ulclass="menu mx-auto"><liclass="nav-item active"><ahref=""class="nav-link">Home</a></li><liclass="nav-item"><ahref=""class="nav-link">Portfolio</a></li><liclass="nav-item"><ahref=""class="nav-link">About</a></li><liclass="nav-item"><ahref=""class="nav-link">Contact</a></li></ul></div><!-- TOGGLER | MOBILE --><buttonclass="toggler bg-secondary"data-nav="#mainNav2"><iclass="fa fa-bars"></i></button></div></nav>
Navbar Expanded
add .expanded class to .navbar
<!-- NAVBAR --><navclass="navbar expanded default-nav bg-primary"><divclass="container"><!-- LOGO --><divclass="brand"><ahref="#!">Logo</a></div><!-- NAVBAR --><divclass="menu-box"id="mainNavExpand"><!-- CLOSE BUTTON | MOBILE--><divclass="menu-close"><iclass="fa fa-close"></i></div><!-- MENU --><ulclass="menu ml-auto"><liclass="nav-item active"><ahref=""class="nav-link">Home</a></li><liclass="nav-item"><ahref=""class="nav-link">About</a></li></ul></div><!-- TOGGLER | MOBILE --><buttonclass="toggler bg-secondary"data-nav="#mainNavExpand"><iclass="fa fa-bars"></i></button></div></nav>
<!-- NAVBAR --><navclass="navbar expand-sm default-nav bg-primary"><divclass="container"><!-- TOGGLER | MOBILE --><buttonclass="toggler bg-gray text-white mr-auto ml-0"data-nav="#mainNav3"><iclass="fa fa-bars"></i></button><!-- NAVBAR --><divclass="menu-box"id="mainNav3"><!-- CLOSE BUTTON | MOBILE--><divclass="menu-close"><iclass="fa fa-close"></i></div><!-- MENU --><ulclass="menu"><liclass="nav-item active"><ahref=""class="nav-link">Home</a></li><liclass="nav-item"><ahref=""class="nav-link">About</a></li></ul></div><!-- LOGO --><divclass="brand pr-0"><ahref="#!">Logo</a></div></div></nav>
Slide Down Navbar
NOTE: By Default FamousUI.js and FamousUI.min.js includes Side
Navbar.
If you want to add Slide Down Navbar, Do not include compiled version of Famous UI
js
include slideDown-navbar.js for Slide Down Navbar.