Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
<div class="navbar navbar-default custom-navbar">
   <div class="container-fluid">
      <div class="navbar-header">
         <h2 class="name">Jovan S Hernandez</h2>
         <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>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
         <ul class="navbar-right nav navbar-nav">
            <li><a href="mailto:jovanshernandez@gmail.com"><i class="fa fa-envelope-o"></i> Email Me</a></li>
            <li><a href="http://www.twitter.com/jovansn0w"><i class="fa fa-twitter"></i> Twitter</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Projects <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                  <li><a href="#">JoCat Creative Media</a></li>
                  <li><a href="#">Gesaffelstein Landing</a></li>
                  <li><a href="#">Monthly  Resolutions</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Home</a></li>
                  <li class="divider"></li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- .navbar-collapse --> 
   </div>
   <!-- .container --> 
</div>
<!-- .navbar -->
  
</body>
</html>
 
.custom-navbar {
    background: transparent;
    border: 0px;
}
@media (max-width:767px) { 
    .custom-navbar .name {
        font-size: 20px;
        float: left;
        margin: 0;
        padding: 15px 0 15px 15px;
    }
    .custom-navbar .navbar-toggle {
        margin: 10px 15px 0 0;
        float: right;
    }
}
@media (min-width:768px) { 
    .custom-navbar .navbar-header {
        width: 100%;
        margin: 0;
    }
    .custom-navbar .name {
        text-align: center;
        float: none;
    }
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
carasmopro
0viewers