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.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Logo Above Navigation w/o repeat img or extra crap</title>
</head>
<body>
  
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="logo" href="#"><img src="http://placehold.it/100x75/000/FFFFFF&text=LOGO" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#/property/list/1">Buy</a>
                    </li>
                    <li>
                        <a href="#/property/list/2">Rent</a>
                    </li>
                    <li>
                        <a href="#/property/list/3">New Properties</a>
                    </li>
                    <li>
                        <a href="#/property/alert">Property Alert</a>
                    </li>
                    <li>
                        <a href="#/resource">E-Learning</a>
                    </li>
                    <li>
                        <a href="#/about">About Us</a>
                    </li>
                    <li>
                        <a href="#/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>  
  
  
  <footer>
    <h1 class="h5"><a href="http://BootstrapBoogie.com">Unique Bootstrap Themes</a></h1>
  </footer>
​
</body>
</html>
 
.navbar-custom {
    background: navy
}
​
.navbar-custom .logo img {
    padding: 15px;
    max-width: 100%;
    height: auto;
}
​
.navbar-custom .logo {
    float: left;
    padding-right: 40px;
    width: 100%;
}
​
.navbar-custom .navbar-toggle {
    position: absolute;
    right: 15px;
    top: 15px;
    border: 0px;
    width: 50px;
    margin: 0;
}
​
.navbar-custom .icon-bar {
    width: 100%;
    margin: 5px 0;
    height: 3px;
}
​
@media (min-width:768px) { 
    .navbar-custom.navbar {
        height: 200px
    }
​
    .navbar-custom .container {
        position: relative;
        overflow: visible;
    }
​
    .navbar-custom .navbar-nav {
        padding: 125px 0 0;
        text-align: center;
        width: 100%;
    }
​
    .navbar-custom .navbar-nav > li {
        display: inline-block;
        float: none;
    }
​
    .navbar-custom .logo {
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        z-index: 5000;
        display: block;
        float: none;
        padding: 0;
    }
​
    .navbar-custom .logo:before,
    .navbar-custom .logo:after {
        position: absolute;
        background: #fff;
        content: '';
        left: -2000px;
        width: 2000px;
        bottom: 0;
        display: block;
        height: 100%;
    }
​
    .navbar-custom .logo:after {
        left: auto;
        right: -2000px;
    }
}
​
​
footer {position:fixed;bottom:0;text-align:center;left:0;right:0;}
​
​
Output

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

Dismiss x
public
Bin info
carasmopro
0viewers