Skip to content

Instantly share code, notes, and snippets.

@justincarroll

justincarroll/bootstrap-centered-navbar.htm

Last active December 17, 2015 08:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justincarroll/5581027 to your computer and use it in GitHub Desktop.
Save justincarroll/5581027 to your computer and use it in GitHub Desktop.
Download ZIP
This basically fakes a 3-column layout by positioning the middle column (absolutely) and using .pull-right on the last column. The first column, .brand goes unaffected. If you're planning to have a lot of list items in .nav.centered you'll want to tweak this solution with additional styling.
Raw
bootstrap-centered-navbar.htm
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Centered Navbar</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Responsive Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" class="pull-right">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav centered">
<li><a href="http://monasterydesign.com/work/" target="_blank">Work</a></li>
<li><a href="http://monasterydesign.com/profile/" target="_blank">Profile</a></li>
<li><a href="http://monasterydesign.com/blog/" target="_blank">Blog</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="mailto:hello@monasterydesign.com" target="_blank"><i class="icon-envelope-alt"></i></a></li>
<li><a href="http://facebook.com/monasterydesign/" target="_blank"><i class="icon-facebook"></i></a></li>
<li><a href="http://twitter.com/justincarroll/" target="_blank"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
/* Large desktop down to portrait tablet */
@media (min-width: 979px) {
.nav.centered, .nav.centered > li { float: none; }
.nav.centered {
position: absolute;
text-align: center;
width: 100%;
}
.nav.centered > li { display: inline-block; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment