<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 ---------->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Michael Charles Criste</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="primary-menu" class="nav navbar-nav navbar-right">
<li><a class="navbar-brand" href="#">Brand Name</a></li>
</ul>
<ul id="secondary-menu" class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<hp>Content here.</hp>
</div>
</div>
body {
padding-top:90px;
}
#primary-menu {
visibility: visible;
}
#secondary-menu {
visibility: hidden;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.navbar-toggle {
display: block;
float: left;
margin-left: 15px;
}
a:hover {
text-decoration: none;
}
.modal-backdrop {
background-color: #89b3f7;
}
.form-control {
color: #fff;
background-color: #498af3;
border: none;
}
#name::-webkit-input-placeholder,
#email::-webkit-input-placeholder,
#phone::-webkit-input-placeholder,
#message::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
#name:-moz-placeholder,
#email:-moz-placeholder,
#phone:-moz-placeholder,
#message:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
opacity: 1;
}
#name::-moz-placeholder,
#email::-moz-placeholder,
#phone::-moz-placeholder,
#message::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
opacity: 1;
}
#name:-ms-input-placeholder,
#email:-ms-input-placeholder,
#phone:-ms-input-placeholder,
#message:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
.modal-content {
background-color: transparent;
box-shadow: none;
}
.modal-header,
.modal-body {
border-bottom: none;
}
.modal-footer{
border-top: none;
}
h1, h2, h3, h4, h5, h6 {
color: #498af3;
}
h1, h2, h3 {
font-weight:800;
}
/* delete this when done and first line of .navbar-inverse */
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: #3F4342;
background-color: #f4f4f4;
}
.navbar-inverse {
background-color: #f4f4f4;
border: none;
}
.navbar-toggle {
margin-top: 15px;
margin-bottom: 15px;
}
.navbar-toggle .icon-bar {
width: 35px;
height: 5px;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 35px;
font-size: 18px;
text-transform: uppercase;
}
header {
background-color: #E4E4E4;
}
.modal-dialog {
margin-top:80px;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 26px;
padding-bottom: 26px;
}
}
h2 {
font-size: 24px;
font-weight: 300;
line-height: 1.4;
}
$( "button" ).click(function() {
$('#primary-menu').collapse('hide');
$('#secondary-menu').collapse('show');
});
