Navbar

by Vaibhav Deshwal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#"><img class = "brand" src="http://s22.postimg.org/jqeqfxqx9/ob_logo_1.png" alt="OB" /> Optimized Bits</a>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#home">Home</a>

                </li>
                <li><a href="#services">Services</a>

                </li>
                <li><a href="#student-apps">Student Apps</a>

                </li>
                <li><a href="#plans-pricing">Plans and Pricing</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
            </ul>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>
<section id="home">
    <div class="page-container">
        <div class="col-md-12 ">
             <h1 class="title">We optimize solutions so that you dont have to</h1>

        </div>
    </div>
</section>
<section id="services"></section>
<section id="student-apps"></section>
<section id="plans-pricing"></section>
<section id="about-us"></section>

CSS

@font-face {
    font-family:"Roboto";
    src: url('http://fonts.googleapis.com/css?family=Roboto:400,700');
}
html{
  background: url("http://i57.tinypic.com/34tbjfd.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body, html {
    height: 100%;
    font-family:
}
body{
    background-color:inherit;
}
@media (min-width: 700px) {
    section {
        height: 100%;
        background-color: transparent;
        border-bottom:1px solid white;
    }
}
.brand {
    height: 35px;
}
.navbar.navbar-default {
    background-color: white;
}
.navbar-default .navbar-brand {
    color: #34495e;
}
.navbar-default .navbar-brand:hover {
    color:black;
}
.navbar.navbar-default ul.nav>li>a {
    color: #34495e;
}
.navbar.navbar-default ul.nav>li.active>a {
    background-color: #3498db;
    color: white;
}
.page-container {
    margin-top:60px;
}
.title {
    padding: 0.5em 1em;
    margin-bottom:1em;
    text-align: center;
    color: white;
}
.login-box {
    text-align: center;
    margin-top:2em;
}
.fa-login { 
    border:1px solid white;
    padding: 10px 10px 0px 10px;
    background: #ecf0f1;
    font-size: 10em;
    border-radius:50%;
}
.btn-login{
    margin-top: 1em;
    background-color: #5c5c5c;
    color: white;
}
.btn-login:hover{
    background-color: #e67e22;
}
.i-mac>img{
    
}
.login-box>img{
    border: 1px solid white;
border-radius: 50%;
}

JavaScript

// PAGE IS FULLY LOADED  
    // FADE OUT YOUR OVERLAYING DIV
    //$('#ob_loader').fadeOut();
    var kya, KareenaHome = {
        settings: {
            nav_linkers: $('.nav>li>a')
        },
        //Now read code from here
        init: function () {
            //give kya all the settings it needs
            "use strict";
            kya = this.settings;
            this.navScrollKaro();
        },
        //For navigating the navbar links on home page
        navScrollKaro: function () {
            "use strict";
            kya.nav_linkers.on("click", function (event) {
                event.preventDefault();
                console.log($(this).attr('href'));
                KareenaHome.scrollKaroIdPar($(this).attr('href')); //the target of the navbar element that has been clicked
                $(this).parents('ul').children('li').removeClass('active');
                $(this).parent().addClass('active');
            });
        },

        //Helper functions start here
        //Scroll you to a provided id
        scrollKaroIdPar: function (id_target) {
            $('html,body').animate({
                scrollTop: ($(id_target).offset().top) - 60
            },
                'slow'); //the 60 is space for the navbar bitches
            return;
        }
    };
    KareenaHome.init();