Bootsnav - Bootstrap menu multi purpose header

Bootsnav is a multi purpose header based with Bootstrap, you can build any header style with bootsnav only with a few minutes.

Bootsnav is free services, including support. In order to keep this project going, please make a donation to help us.

Thank you for your understanding.


23 Header layout free to use

Start your project with bootsnav, and build your best navigation menu.

Documentation

CSS files stored in folder 'CSS' and 'skins' (color skins). However, you'd just need to edit the overwrite.css file. It contains the styling elements for all header menu.

File Structure

bootsnav/
├── css/
│   ├── bootsnav.css
│   ├── overwrite.css
├── js/
│   ├── bootsnav.js
└── skins/
    └── color.css

Bootsnav template

Start with this basic HTML template, you can build any navigation style with this started template.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootsnav - Multi Purpose Header</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">

    <!-- Font Style -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
    
    <!-- Animate -->
    <link href="css/animate.css" rel="stylesheet">
    
    
<!-- Bootsnav --> <link href="css/bootsnav.css" rel="stylesheet"> <link href="css/overwrite.css" rel="stylesheet"> <link href="skins/color.css" rel="stylesheet">
<!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>     <![endif]--> </head> <body> <!-- Start Navigation -->
<nav class="navbar navbar-default bootsnav">
<div class="container"> <!-- Start Header Navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#brand"><img src="LOGO_ADDRESS" class="logo" alt=""></a> </div> <!-- End Header Navigation --> <!-- Start Menu --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- End Menu --> </div> </nav> <!-- End Navigation --> <div class="clearfix"></div> <div class="container"> <div class="jumbotron"> <h1>Hello world</h1> <p>I'm the first content</p> </div> </div> <!-- START JAVASCRIPT --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
<!-- Bootsnavs --> <script src="js/bootsnav.js"></script>
</body> </html>
Navbar Inverse

Add class "navbar-inverse" into tag "<nav class="navbar">"


<nav class="navbar navbar-inverse bootsnav">
Add Logo Files

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <i class="fa fa-bars"></i>
    </button>
    <a class="navbar-brand" href="#brand"><img src="LOGO_ADDRESS" class="logo" alt=""></a>
</div>

Credit

Framework Based
- Bootstrap V.3 - http://getbootstrap.com/

Font
- Open Sans - https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

Icons
- Font Awesome - https://fortawesome.github.io/Font-Awesome/

Javascript
- jQuery  - https://code.jquery.com/jquery/
- Bootstrap  - http://getbootstrap.com/
- IE  - https://github.com/twbs/bootstrap/tree/master/docs/assets/js

CSS
-  Animate - https://daneden.github.io/animate.css/

Looking for awesome design ?

Amazing HTML Template based from bootstrap