<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//fonts.googleapis.com/css?family=Hind" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <p>&nbsp</p> <h1>Primary Navbar Examples</h1> <p>&nbsp</p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="https://i.imgur.com/TpWQH9c.png" height="24"/></span> sketch<span class="text-danger">U</span>cation</a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> <li><li><button type="button" class="btn btn-danger btn-margin-right navbar-btn"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</button></li></li> <li><button type="button" class="btn btn-success btn-margin-right navbar-btn">Register</button></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <p> This <code>.navbar</code> is shown to visitors and non-logged in users </p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="https://i.imgur.com/TpWQH9c.png" height="24"/></span> sketch<span class="text-danger">U</span>cation</a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> <li><li><button type="button" class="btn btn-danger btn-margin-right navbar-btn">Upgrade</button></li></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rich O Brien <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i> Dev Tools</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i> Shop Tools</a></li> <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Account Settings</a></li> <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <p> This <code>.navbar</code> is shown to logged in users who can subscribe to a paid plan </p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="https://i.imgur.com/TpWQH9c.png" height="24"/></span> sketch<span class="text-danger">U</span>cation</a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> <li><button type="button" class="btn btn-primary btn-margin-right navbar-btn">My Perks</button></li></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rich O Brien <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i> Dev Tools</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i> Shop Tools</a></li> <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Account Settings</a></li> <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <p> This <code>.navbar</code> is shown to logged in users who are paid subscribers </p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="https://i.imgur.com/TpWQH9c.png" height="24"/></span> sketch<span class="text-danger">U</span>cation</a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> <li><button type="button" class="btn btn-primary btn-margin-right navbar-btn">My Perks</button></li></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rich O Brien <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i> Dev Tools</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i> Shop Tools</a></li> <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Account Settings</a></li> <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <p> This <code>.navbar</code> is shown to logged in users who have notifications </p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">sketch<span class="text-danger">U</span>cation</a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> <li><button type="button" class="btn btn-primary btn-margin-right navbar-btn">My Perks</button></li></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rich O Brien <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i> Dev Tools</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i> Shop Tools</a></li> <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Account Settings</a></li> <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <p> This <code>.navbar</code> shows the active menu selection </p> </div> <div class="container"> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> </div>

body { font-family:hind; } h1,h2,h3,h4,h5,h6{ font-family:montserrat; } p{ font-size:17px; } .navbar { border-radius: 0; font-family:montserrat; font-weight:600; } .navbar-inverse { background-color: #2c3e50; border-color: #2c3e50; } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a { color: #fff; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-nav>li>a:hover { background-color:#34495e; } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #34495e; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { background-color: #34495e; } .dropdown-menu { background-color:#2c3e50; } .dropdown-menu>li>a { color: #fff; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #fff; text-decoration: none; background-color: #34495e; } .btn-margin-left { margin-left: 5px; } .btn-margin-right { margin-right: 10px; } .btn-danger { color: #fff; background-color: #c0392b; border-color: #c0392b; } .btn-danger:hover { background-color: #e74c3c; border-color: #e74c3c; } .btn-success { color: #fff; background-color: #27ae60; border-color: #27ae60; } .btn-success:hover { background-color: #2ecc71; border-color: #2ecc71; } .btn-primary { color: #fff; background-color: #2980b9; border-color: #2980b9; } .btn-primary:hover { background-color: #3498db; border-color: #3498db; } .badge-danger { background-color: #e74c3c; }

/* LIGHT GREY #ecf0f1 GREY #bdc3c7 */ /* DARK BLUE #2c3e50 BLUE #34495e */ /* DARK RED #c0392b RED #e74c3c */