I am trying to make my bootstrap navbar transparent. I am using bootstrap navbar-inverse and trying to add opacity by rgba(). I want my navbar to be transparent as shown in the image below:
#font-face {
font-family: FuturaBook;
src: url('fonts/FuturaStd-Light_1.otf');
}
body{
font-family: 'FuturaBook', Arial, sans-serif;
}
/***************************************************************************
Navigation Bar
****************************************************************************/
.navbar-inverse{
background-color: rgba(34, 34, 34, 0.5);
border-bottom: none;
}
.navbar-header{
width:100%;
height: 90px;
}
.navbar-header #brand{
font-family: 'FuturaBook', Arial, sans-serif;
color: white;
font-size: 20pt;
margin-top: 20px;
text-transform: uppercase;
}
.mynav li
{
list-style: none;
display: inline-block;
border-left: 1px solid white;
padding-top: 36px;
padding-left: 10px;
padding-right: 10px;
/* margin-top: 16px; */
height: 90px;
}
.mynav li:last-child{
border-right: 1px solid white;
}
.mynav li a{
color:white;
}
.mynav li a:hover{
text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<nav class="navbar navbar-transparent navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="navbar-brand" href="#" id="brand">Fashion Garage</a>
<div class="mynav pull-right">
<ul>
<li>TRENDS</li>
<li>PRODUCTS</li>
<li>DESIGNERS</li>
<li>MEMBERS</li>
<li>SEARCH</li>
<li>MY ACCOUNT</li>
</ul>
</div><!-- /mynav -->
</div><!-- /navbar-header -->
</div><!-- /container -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/lady-1.jpg" alt="Lady-1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/lady-2.jpg" alt="Lady-2">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</nav><!-- /nav -->
</div><!-- /wrapper -->
If you're still having problems I suggest just start over and use this :
It's pretty simple and straight forward. Don't add another class to navbar just a suggestion. Also you can replace the link of the Bootstrap CSS and JS. It's just the CDN link. Here's the output if your're interested.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
body{
background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
}
.navbar{
border: none;
border-radius: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
In the portion of your website, load your new custom CSS file after the default bootstrap stylesheet.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
In your custom.css
.navbar {
background-color: transparent;
background: transparent;
border-width: 0px;
}
Try this:
.navbar {
background-color: transparent;
background: transparent;
}
.navbar li { color: #000 }
Update:
On CSS seconde line replace: <nav class="navbar navbar-transparent navbar-inverse"> to <nav class="navbar navbar-transparent">
Possible answers:
Transparent color of Bootstrap-3 Navbar
css to make bootstrap navbar transparent
Here is my code pen which i have tried making the navigation bar transparent and responsive. Hope it helps you.
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
You can find the rest of the code here
Related
I would want to make a working bootstrap submenu as toggable and having a few options in the submenu to chose from but i dont know how to make it and didnt find an answer anywhere.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="jdm.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="main2.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item dropdown-toggle" href="">Submenu</a></li>
<a class="dropdown-item" href="">Option in Submenu</a>
//I would want to make a working submenu
</ul>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
This is a duplicate question, in this link you can find a similar if not the same question
Bootstrap 4: Multilevel Dropdown Inside Navigation
There you can find some helpful answers!
***Don't forgot to mark this as accepted answer if it was helpful****
There are a few examples here you could use to learn from https://codepen.io/bootstrapped/pen/KwYGwq
here is the html
<br>
<div class="container">
<p class="lead"> This is an <b>updated</b> version of the <em class="text-danger">Bootstrap 3 navbar logos demo</em>. There is a <a target="_blank" rel="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=930218">bug in firefox</a> that incorrectly displays padding on
images nested inside floating blocks. For more details and why it's important to use this method with the navbar logo read about check out this demo <a target="_blank" href="https://codepen.io/bootstrapped/details/OMXQVo">here</a>.
<br><br>
If you want to see how to get your navbar to automatically collapse if the menu items overflow, check out this codepen.
</p>
<p class="lead">
If you want to create a sticky navbar check out <a target=_"blank" href="https://codepen.io/bootstrapped/details/jAKqLV/">this</a>. Or for sticky with pure js only see <a target=_"blank" href="https://codepen.io/bootstrapped/details/mEKAzG/">this</a> or alternatively <a target=_"blank" href="https://codepen.io/bootstrapped/details/vKAXZd/">this</a> which shows how to do it with affix events.
</p>
</div>
<h1 class="text-center">Example 1 - Default Logo Resized to fit</h1>
<div class="container">
<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="#navbar1">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 2 - Increase logo size and add menu to right side</h1>
<div class="container example2">
<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="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 3 - Increase entire navbar height</h1>
<div class="example3">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 4 - Tall Narrow Logo</h1>
<div class="container example4">
<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="#navbar4">
<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="http://disputebills.com"><img style=" width: 64px;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar4" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 5 - Pull menu to right</h1>
<div class="container example5">
<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="#navbar5">
<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="http://disputebills.com"><img style=" width: 64px;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">Brand Name
</a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<h1 class="text-center">Example 6 - Background Image with hidden text</h1>
<nav class="navbar navbar-inverse navbar-static-top example6">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
<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 text-hide" href="http://disputebills.com">Brand Text
</a>
</div>
<div id="navbar6" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<h1 class="text-center">Example 7 - Center Navbar Brand / Logo On Mobile Display</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<div class="container example-7">
<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="#navbar7">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar7" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<br>
<h1 class="text-center">Example 8 - Center Navbar logo background</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<nav class="navbar navbar-inverse navbar-static-top example-8">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar8">
<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 text-hide" href="#">Brand Text
</a>
</div>
<div id="navbar8" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<br>
<h1 class="text-center">Example 9 - Version 2 Centered (Using flexbox)</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<div class="container">
<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="#navbar9">
<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="brand-centered">
<a class="navbar-brand" href="http://disputebills.com"><img style="margin-right: 10px; padding: 0;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">Dispute Bills
</a>
</div>
<div id="navbar9" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
here is the css
/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/*************************
EXAMPLES 2-7 BELOW
**************************/
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* EXAMPLE 3
line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height */
.example3 .navbar-brand {
height: 80px;
}
.example3 .nav >li >a {
padding-top: 30px;
padding-bottom: 30px;
}
.example3 .navbar-toggle {
padding: 10px;
margin: 25px 15px 25px 0;
}
/* EXAMPLE 4 - Small Narrow Logo*/
.example4 .navbar-brand>img {
padding: 7px 14px;
}
/* EXAMPLE 5 - Logo with Text*/
.example5 .navbar-brand {
display: flex;
align-items: center;
}
.example5 .navbar-brand>img {
padding: 7px 14px;
}
/* EXAMPLE 6 - Background Logo*/
.example6 .navbar-brand{
background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center / contain no-repeat;
width: 200px;
}
/* EXAMPLE 8 - Center on mobile*/
#media only screen and (max-width : 768px){
.example-8 .navbar-brand {
padding: 0px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.example-8 .navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
}
/* EXAMPLE 8 - Center Background */
.example-8 .navbar-brand {
background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center / contain no-repeat;
width: 200px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
/* EXAMPLE 9 - Center with Flexbox and Text*/
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.brand-centered .navbar-brand {
display: flex;
align-items: center;
}
.navbar-toggle {
z-index: 1;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}
I'm trying to get my navbar to look like this but the navbar-brand will not center with the other text I'm new this site and it won't let me post the css so I will comment it bellow
NAVBAR EXAMPLE
https://jsbin.com/defibenedo/1/edit?html,css,output
.navbar-brand { font-size: 20px; font-family: "STIXGeneral"; color: black; font-weight: bold; text-align: center; } .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; }
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
<style>
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
/* DEMO example styles for logo image */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
</style>
<h1 class="text-center">Center Navbar Brand / Logo On Mobile Display</h1>
<p class="text-center lead">
Resize the browser width to view the effect!
</p>
<div class="container">
<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="#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="http://disputebills.com"><img src="http://www.goodmanmfg.com/Portals/0/images/Logos/BBB%20Logo-tall.jpg" alt="Dispute Bills">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Please check that link : https://codepen.io/bootstrapped/pen/dGPZvR
Look at this
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">VENDER</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
A. One way would be to include your navbar-brand as a list item. at the position where you want it to be. And then add margin or padding left right to create your desired output
See jsFiddle as in the snippet the navbar is hidden ( mobile screen size )
.navbar-brand {
font-size: 20px;
font-family: "STIXGeneral";
color: black;
font-weight: bold;
text-align: center;
margin: 0 30px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<a class="navbar-brand" href="#">VENDER</a>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
B. You could also split your menu into two parts ( one float:left other float:right) but that might cause mobile menu behavior issues.
See jsFiddle and/or code snippet below
.navbar-brand {
font-size: 20px;
font-family: "STIXGeneral";
color: black;
font-weight: bold;
text-align: center;
float: none;
}
.navbar-collapse {
text-align: center
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<a class="navbar-brand" href="#">VENDER</a>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
What i want to say is that with your current HTML structure, what you want may not be possible.
I'm creating my new website and I would like to set my navbar full-width with my centered text.
All is fine, but I don't overcome to set full-width.
body {
background-color: #4D4D4D;
}
.navbar-collapse {
text-align: center;
background-color: #1B1B1B;
}
.navbar-nav {
display: inline-block;
float: none;
}
ul.nav.navbar-nav>li>a {
color: #C44632;
}
#content {
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<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, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Optiques</li>
<li class="divider"></li>
<li>Monture</li>
<li class="divider"></li>
<li>Capteurs Photo</li>
<li class="divider"></li>
<li>Accessoires</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Planétaire</li>
<li class="divider"></li>
<li>Ciel Profond</li>
<li class="divider"></li>
<li>Autres</li>
</ul>
</li>
<li>Article</li>
<li>Données Météo</li>
<li>Contact</li>
<li>Qui suis-je ?</li>
</ul>
</div>
</nav>
</div>
What is missing in order to get full-width navbar ?
Everything is fine, You just need to put your <div class="container"> inside <nav>.
Try this:
body {
background-color: #4D4D4D;
}
.navbar-collapse {
text-align:center;
background-color: #1B1B1B;
}
.navbar-nav {
display:inline-block;
float:none;
}
ul.nav.navbar-nav > li > a {
color : #C44632;
}
#content {
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<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, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Optiques</li>
<li class="divider"></li>
<li>Monture</li>
<li class="divider"></li>
<li>Capteurs Photo</li>
<li class="divider"></li>
<li>Accessoires</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Planétaire</li>
<li class="divider"></li>
<li>Ciel Profond</li>
<li class="divider"></li>
<li>Autres</li>
</ul>
</li>
<li>Article</li>
<li>Données Météo</li>
<li>Contact</li>
<li>Qui suis-je ?</li>
</ul>
</div>
</div>
</nav>
Change :
<div class="container">
To:
<div class="container-fluid">
and in css:
.container-fluid {
padding:0;
}
Bootstrap .container has fixed width (1170px) for medium devices, you need to make it 100%;
PS: Adding a custom class to override bootstrap's css is good practice.
.custom-container{
width:100%;
padding:0;
}
body {
background-color: #4D4D4D;
}
.custom-container {
width: 100%;
padding: 0;
}
.navbar-collapse {
text-align: center;
background-color: #1B1B1B;
}
.navbar-nav {
display: inline-block;
float: none;
}
ul.nav.navbar-nav>li>a {
color: #C44632;
}
#content {
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.custom-container {
width: 100%;
padding: 0;
}
</style>
<div class="container custom-container">
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<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, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Optiques</li>
<li class="divider"></li>
<li>Monture</li>
<li class="divider"></li>
<li>Capteurs Photo</li>
<li class="divider"></li>
<li>Accessoires</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Planétaire</li>
<li class="divider"></li>
<li>Ciel Profond</li>
<li class="divider"></li>
<li>Autres</li>
</ul>
</li>
<li>Article</li>
<li>Données Météo</li>
<li>Contact</li>
<li>Qui suis-je ?</li>
</ul>
</div>
</nav>
</div>
The easiest solution is to put your <nav> outside <div class="container"> because <div class="container"> has it's own styling(padding)
I hope I can explain all what I need of you guys here :)
I want to get some like this:
http://i.imgur.com/OzyQlHC.png
But on my code, I tried a few things, but I can't get that end :S I don't know to do it and I dont found exactly what I want...
Here's my code:
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">JVasconcelos</a></div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>CV</li>
<li>Contacto</li>
</ul>
</div> <!-- /.navbar-collapse -->
</nav>
<footer>
<h3> © 2016 - Jose Antonio - JVasconcelos </h3>
</footer>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Here's the CSS:
.navbar-brand { float: none; }
.navbar-center { position: absolute; width: 100%; text-align: center; margin: auto; height:100%; }
--> EDIT: I did it with this code, but if exists another easier way how it is?
.navbar { margin-top: 90px; margin-left: 450px; width: 900px; }
So much thanks for watch this post and the help if you can :)
You don't have to use any tricks.
Just put your code in div with class of container. Set top and bottom margin to body and that is it.
HTML:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="content">Content</div>
<footer>Footer</footer>
</div>
CSS:
body {
margin-top: 100px;
margin-bottom: 100px;
}
.navbar {
margin-bottom: 0;
}
.content,
footer{
height: 1000px;
background: #333;
color: #fff;
font-size: 60px;
text-align: center;
padding-top: 400px
}
footer {
height: 100px;
background: #eee;
color: #333;
padding: 0;
}
CODEPEN EXAMPLE
I have TOP nav bar with some menus and Side nav bar with some menus. I given styling for the vertical nav bar , but it reflects to all the nav bar and gives me output like given in pictureenter image description here
Can anyone suggest me how to seperate the styling for the vertical menu.Vertical menus styling starts from #media
.top-color {
background-color: aquamarine;
margin-bottom: 0;
}
.firstmenu {
margin-bottom: 0;
}
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left: 0;
padding-right: 0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
max-width: 300px;
margin-right: 0;
margin-left: 0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar top-color">
<!--nav header Div-->
<div class="container-fluid">
<div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse firstmenu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
.top-color {
background-color: aquamarine;
margin-bottom: 0;
}
.firstmenu {
margin-bottom: 0;
}
.navbar-default .navbar-toggle {
display: none ;
}
.navbar.navbar-default {
float: left;
width: 50%;
}
.navbar-default .collapse.navbar-collapse.navbar-ex1-collapse {
display: block;
float: left;
width: 100%;
}
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left: 0;
padding-right: 0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
max-width: 300px;
margin-right: 0;
margin-left: 0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar top-color">
<!--nav header Div-->
<div class="container-fluid">
<div class="col-sm-1"><a class="navbar-head" style="text-decoration:none; color:white;" href="#"><h1>My Page</h1></a>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse firstmenu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
You can try this css:
.navbar-default .navbar-toggle {
display: none ;
}
.navbar.navbar-default {
float: left;
width: 50%;
}
.navbar-default .collapse.navbar-collapse.navbar-ex1-collapse {
display: block;
float: left;
width: 100%;
}