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%;
}
Related
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
Here is my code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style_inventive.css" rel="stylesheet" media="screen">
where style_inventive.css is style sheet I am using for menu
here is CSS file contents
#media (min-width: 768px){
.navbar-right .dropdown-menu {
right: auto;
}}
.nav>li>a:hover
{
background-color: #336699;
color:#fff;
}
.dropdown-menu
{
margin: 0px;
padding-top :0px;
padding-bottom: 0px;
color: #fff;
}
.dropdown-menu>li>a:hover
{
background-color: #336699;
color:#fff;
}
.dropdown-menu li
{
height: 40;
color: #fff;
float: none;
display: block;
margin: 0;
text-align: left;
border: 0;
border-bottom: 1px solid #d5d5d5;
}
.dropdown-menu a
{
margin-top: 10;
}
Here is HTML Code for menu
<div class="col-sm-7 menu">
<div class="collapse navbar-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="dropdown" id="licompany">
COMPANY
<ul class="dropdown-menu" role="menu">
<li>About Us</li>
<li>Meet The Team</li>
<li>Join Us</li>
</ul>
</li>
<li class="dropdown">
SERVICE
<ul class="dropdown-menu" role="menu">
<li>Mobile App Development</li>
<li>Software Development</li>
<li> Web development</li>
</ul>
</li>
<li>PORTFOLIO</li>
<li class="dropdown">
TECHNOLOGY
<ul class="dropdown-menu" role="menu">
<li>PHP</li>
<li>JAVA</li>
<li>Android</li>
<li>.Net</li>
<li>iOS</li>
</ul>
</li>
<li>SITEMAP</li>
</ul>
</div>
</div>
Except menu, everything is shown when I resize my browser.
Menu is not shown when I resize.
I just updated html structure according to bootstrap example its working.
if you see bootstrap example thay used navbar-header outside the
collapse navbar-collapse but in your case you missed it.
second you'r targeting navbar-responsive-collapse in
data-target=".navbar-responsive-collapse" but you have not define
it in with navbar-collapse so i just add example targeted ID
data-target="#bs-example-navbar-collapse-1" and define it in <div
class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">.
I just take another element navbar navbar-default inside col-sm-7
menu this is important thing that you have missed without the navbar
class its obviously will not work.
see fiddle
<div class="col-sm-7 menu">
<nav class="navbar navbar-default">
<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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="dropdown" id="licompany">
COMPANY
<ul class="dropdown-menu" role="menu">
<li>About Us</li>
<li>Meet The Team</li>
<li>Join Us</li>
</ul>
</li>
<li class="dropdown">
SERVICE
<ul class="dropdown-menu" role="menu">
<li>Mobile App Development</li>
<li>Software Development</li>
<li> Web development</li>
</ul>
</li>
<li>PORTFOLIO</li>
<li class="dropdown">
TECHNOLOGY
<ul class="dropdown-menu" role="menu">
<li>PHP</li>
<li>JAVA</li>
<li>Android</li>
<li>.Net</li>
<li>iOS</li>
</ul>
</li>
<li>SITEMAP</li>
</ul>
</div>
</nav>
</div>
I have add some code that may b not in your code
working model
#media (min-width: 768px) {
.navbar-right .dropdown-menu {
right: auto;
}
}
.nav>li>a:hover {
background-color: #336699;
color: #fff;
}
.dropdown-menu {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
color: #fff;
}
.dropdown-menu>li>a:hover {
background-color: #336699;
color: #fff;
}
.dropdown-menu li {
height: 40;
color: #fff;
float: none;
display: block;
margin: 0;
text-align: left;
border: 0;
border-bottom: 1px solid #d5d5d5;
}
.dropdown-menu a {
margin-top: 10;
}
<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-container" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left fixed" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span><span class="icon-bar">
</span><span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<div class="col-sm-7 menu">
<div class="collapse navbar-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="dropdown" id="licompany">
COMPANY
<ul class="dropdown-menu" role="menu">
<li>About Us</li>
<li>Meet The Team</li>
<li>Join Us</li>
</ul>
</li>
<li class="dropdown">
SERVICE
<ul class="dropdown-menu" role="menu">
<li>Mobile App Development</li>
<li>Software Development</li>
<li> Web development</li>
</ul>
</li>
<li>PORTFOLIO</li>
<li class="dropdown">
TECHNOLOGY
<ul class="dropdown-menu" role="menu">
<li>PHP</li>
<li>JAVA</li>
<li>Android</li>
<li>.Net</li>
<li>iOS</li>
</ul>
</li>
<li>SITEMAP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
demo
Check with this below code following changes i have made in your code have a look
1st you have missed out <nav class="navbar navbar-default"> for navbar and 2nd you have missed <div class="navbar-header"> mobile screen navbar if you miss parent class it will apply class and also menu will be not be responsive.
#media (min-width: 768px){
.navbar-right .dropdown-menu {
right: auto;
}}
.nav>li>a:hover
{
background-color: #336699 !important;
color:#fff !important;
}
.dropdown-menu
{
margin: 0px;
padding-top :0px;
padding-bottom: 0px;
color: #fff;
}
.dropdown-menu>li>a:hover
{
background-color: #336699 !important;
color:#fff !important;
}
.dropdown-menu li
{
height: 40;
color: #fff;
float: none;
display: block;
margin: 0;
text-align: left;
border: 0;
border-bottom: 1px solid #d5d5d5;
}
.dropdown-menu a
{
margin-top: 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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-7 menu">
<nav class="navbar navbar-default">
<!-- 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 visible-xs" 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>HOME</li>
<li class="dropdown" id="licompany">
COMPANY
<ul class="dropdown-menu" role="menu">
<li>About Us</li>
<li>Meet The Team</li>
<li>Join Us</li>
</ul>
</li>
<li class="dropdown">
SERVICE
<ul class="dropdown-menu" role="menu">
<li>Mobile App Development</li>
<li>Software Development</li>
<li> Web development</li>
</ul>
</li>
<li>PORTFOLIO</li>
<li class="dropdown">
TECHNOLOGY
<ul class="dropdown-menu" role="menu">
<li>PHP</li>
<li>JAVA</li>
<li>Android</li>
<li>.Net</li>
<li>iOS</li>
</ul>
</li>
<li>SITEMAP</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Include This Js at top / bottom of the page
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