I have a custom navbar where I have spaced out the links through the use of seperate divs for each of the links. When the width is < 768px the collapsed links are spaced very irregularly and I'd like to correct this CSS while maintaining the CSS for the un-collapsed version.
HTML
<body>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to("Brand Name", root_path, { :class => "navbar-brand logo" }) %>
</div>
<div class="collapse navbar-collapse" id="collapse-menu">
<ul class="nav navbar-nav middle-left">
<li><%= link_to("About", about_path, { :class => "nav-link-custom" }) %></li>
</ul>
<ul class="nav navbar-nav middle-right">
<li><%= link_to("Help", help_path, { :class => "nav-link-custom" }) %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link-custom" href="#">Sign In</a></li>
</ul>
</div>
</div>
</nav>
<%= yield %>
</body>
CSS
/* Navbar */
.logo:hover {
background: none;
}
.nav > li > a:hover {
background: none;
}
.middle-left {
margin-left: 25%;
}
.middle-right {
margin-left: 10%;
}
.navbar-toggle {
background: white;
border: thin solid gray;
}
.icon-bar {
background: gray;
}
Un-Collapsed
^ I took this screenshot because I couldn't get the fiddle to work.
Collapsed
^ I took this screenshot because I couldn't get the fiddle to work.
Just use a media query and your nav will result in the default mobile nav.
/* Navbar */
.navbar .logo:hover {
background: none;
}
.navbar .nav > li > a:hover {
background: none;
}
.navbar .navbar-toggle {
background: white;
border: thin solid gray;
}
.navbar .icon-bar {
background: gray;
}
#media (min-width: 768px) {
.navbar .middle-left {
margin-left: 25%;
}
.navbar .middle-right {
margin-left: 10%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-menu"> <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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-menu">
<ul class="nav navbar-nav middle-left">
<li>Link
</li>
</ul>
<ul class="nav navbar-nav middle-right">
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link-custom" href="#">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
Wrap the margin CSS inside a media query so that it will effect the text only in expanded version.
#media (min-width: 768px) {
.middle-left {
margin-left: 25%;
}
.middle-right {
margin-left: 10%;
}
}
Related
The toggle button appears in mobile view but it's not clickable. In angular appDropdown is used to define a drop down button. Is there a similar approach to fix the toggle button?
Unfortunately I cannot show images here but there's another problem with "Administration" drop down button. It changes colour to grey when I hover over the internal <li> (such as "Registration"...).
Adding href= "#" removes the unwanted color change but this refreshes the whole page when its clicked.
Here's the HTML:
<nav class="navbar navbar-webmaster">
<div class="container">
<div class="navbar-header">
<button type="button" appDropdown class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" [routerLink]="['/']">Title</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Sublime<span class="sr-only"></span></li>
<li class="dropdown" appDropdown *ngIf="userService.isAdmin">
<a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/register']">Registration</a></li>
<li><a>Other Admin Stuff</a></li>
<li role="separator" class="divider"></li>
<li><a>Another Admin Stuff</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right search-form" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</div>
The CSS:
nav.navbar-webmaster {
background: #00547E;
}
nav.navbar-webmaster a {
color: #fff;
}
nav.navbar-brand :hover {
color: #337ab7;
}
nav.navbar-webmaster ul.navbar-nav a:hover,
nav.navbar-webmaster ul.navbar-nav a:visited,
nav.navbar-webmaster ul.navbar-nav a:focus,
nav.navbar-webmaster ul.navbar-nav a:active {
background: #0d3a51;
}
nav.navbar-webmaster ul.navbar-nav a:hover {
border-color: #337ab7;
}
nav.navbar-webmaster li.divider {
background: #ccc;
}
nav.navbar-webmaster button.navbar-toggle {
background: #999;
border-radius: 2px;
}
nav.navbar-webmaster button.navbar-toggle:hover {
background: #999;
}
nav.navbar-webmaster button.navbar-toggle>span.icon-bar {
background: #fff;
}
nav.navbar-webmaster ul.dropdown-menu {
border: 0;
background: #fff;
}
nav.navbar-webmaster ul.dropdown-menu>li>a {
color: #444;
}
nav.navbar-webmaster ul.dropdown-menu>li>a:hover {
background: #00547E;
color: #fff;
}
Any help is greatly appreciated.
Implemented by using ng-bootstrap. Update html as below
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" [ngbCollapse]="isCollapsed">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Declare below variable in component class
public isCollapsed = false;
For live action, visit my Plunker
I am trying to create a navbar with Bootstrap, with 'navbar-brand' on the left, navbar items centered in the middle, and 2 items on the right too. First I tried to make it from scratch but I couldn't achieve making it responsive enough.
Then, I found this approach on Bootply, which is really close to the one I want with all responsiveness and navbar collapsing. However, I want to swap navbar-brand and left items; brand to be on the left, with left items in the middle; and right items keep their position.
[ Navbar-Brand Home | About | Contact | Address Right, Right]
What is the best, most convenient way to achieve it?
Here is the Snippet:
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
You can use CSS Positioning on .navbar-left and make it in the center using CSS transform (limit it to be on tablets & desktop so that it would not affect mobile layout).
Have a look at the snippet below (use full screen):
.navbar-brand {
position: absolute;
width: auto;
left: 15px;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
/* On Tabs & Desktops */
#media screen and (min-width: 768px) {
.navbar-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
Hope this helps!
You can also try this:
#media screen and (min-width: 768px) {
.navbar-collapse {
position: relative;
}
.navbar-left {
position: absolute;
width: 100%;
text-align: center;
top: 0;
left: 0;
}
.navbar-left > li > a {
display: inline-block;
}
.navbar-left > li {
display: inline;
float: none;
}
}
Codepen: https://codepen.io/anon/pen/GNYNey
I am trying to use bootstrap so that i can make a line break between each of my nav menu.
For example:
Hi | Hi1 | h3
I need it so that the bar at the end also does not show after h3.
I have tried this so far but its not working, its pushing all the nav functions down to the bottom.
HTMKL:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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 class="logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Become A member</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar-default .navbar-nav > li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
height: 2.5em;
}
For some reason it does create the lines but it pushs all my texts down. Thanks for all the help.
Here's an example of how you can do this with pseudo elements (:after). You dont need the positioning rules your currently using (which are the cause of your misaligned links). Use position: absolute and apply a height.
As far as the last li, use :last-child:after to remove the border.
See MDN Pseudo-elements
Working example Snippet (with Active class)
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Working example Snippet without Active
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Example Snippet Mobile
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
top: 25%;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li:after {
right: 0;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
This can be achieved by setting borders.
HTML:
<ul class="navbar-nav mr-auto">
<li class="nav-item">
About us
</li>
<li class="nav-item">
Our Services
</li>
<li class="nav-item">
Solutions
</li>
<li class="nav-item">
Contact
</li>
</ul>
SCSS
.navbar-nav {
li.nav-item {
.is-active {
color: $blue;
border-bottom: 2px solid $violet;
}
.nav-link {
margin: 0 8px;
padding: 0;
}
// for nav navbar-expand-lg
#include media-breakpoint-up(lg) {
border-right: 2px dotted $black;
&:last-child {
border-right: none;
}
}
}
}
This will display a border line to the right, also hides for the last.
This is so inane but I it might help someone else. I had <br> blending in after the navbar item link, and it took me forever to spot. Be wary of any errant <br> tags!
Currently I'm learning Bootstrap 3 and I need help with re-order the layout of navbar in small screen.
I've followed the example in LINK
I've replaced Default / Static / Fixed with user profile
So what I want to change is when the screen is small I will have
|---------- BRAND ----------|
|[-]----------------------profile|
Here is my sample code:
#media (max-width: 767px) {
.navbar-brand {
width: auto;
float: none;
border-bottom: 0 solid transparent;
margin: 0 -15px;
}
.navbar-toggle {
float: left;
}
.nav-user-profile .navbar-nav {
margin: 0;
}
.nav-user-profile .navbar-nav>li {
position: static;
float: left;
}
.nav-user-profile .navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
How can I achieve it?
Thanks for ideas
I think this is what you're trying to do based on your diagram. Probably the simplest way to go is to create a div above the navbar for a second brand location. You can hide one or the other brand location with a hidden/visible class. And the profile link can be placed inside the navbar-header so it's visible across all viewports, it just needs to be positioned correctly on the right and the navbar-toggle floated to the left.
See working Snippet.
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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 hidden-xs" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
I only added text-right very simple look where I noted with //changes*
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
//changes*
<ul class="nav navbar-nav text-right">
//changes*
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
pull-right class may help you...
or
bootstrap is divided to 12 columns for large, medium and small size
So when it breaks into small size give brand to full 12 columns using col-sm-12 class so it will break profile to down
I have one navbar in one website that im building which is full width in large screen.
I am trying to make it in my own width for large screens and im stuck.
i have the code here
.navbar {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar a {
color: #cccccc !important;
}
.navbar a:hover {
color: #ffffff !important;
background-color: #646464 !important;
}
.navbar-header .navbar-brand {
color: white !important;
font-size: 1.5em;
}
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
Do you have any suggestion of how can i make it lets say 800px for wide screens
and when its loaded in tablet to be normal width of all the tablet/smartphone screen?
This might be the simplest way to do this: you can limit the container size with a custom class at whatever media query you'd like the navbar with be 800px, then just adjust the custom container color to the navbar color and the navbar background color so it matches the body or use transparent.
See working example.
body,
html {
margin-top: 55px;
}
.navbar.navbar-custom {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
color: #ffffff;
background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
color: white;
font-size: 1.5em;
}
#media (min-width: 1200px) {
.container.container-nav {
width: 800px;
background-color: #242424;
}
.container.container-content {
width: 800px;
}
.navbar.navbar-custom {
background-color: transparent;
border: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Work
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>News
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container container-content">
<div class="alert alert-warning">Hello</div>
</div>
</body>