Using Bootstrap to create a menu bar. My brand label is aligned far left. The main menu options are center aligned. I'm trying to get 'Logout' to be right aligned. But instead, its on a second line and centered.
<style>
body {
background-color: White;
margin-left: 40px;
margin-right: 40px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-right {
text-align: right;
display: inline-block;
float: none;
vertical-align: top;
}
</style>
<body id=<?php echo $bodyid ?>>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<ul class="nav navbar-nav">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
See a picture of the menu bar here.
Put your <ul> elements in the same container. Also you have a CSS class navbar-right that wasn't used in your HTML. This HTML seems to work fine given a wide enough browser window:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
</div>
You could also experiment with float:right; on the <ul> for your login link (using the same navbar-right class.
Also, keep in mind that bootstrap intends for the container class to have row and col classes inside it to further wrap the content. By using only container you're missing out on a lot of the responsive behavior bootstrap is intended to provide.
Related
I am trying to move the inline menu next to the burger bar on the right hand side of the page. I am using bootsrtap, the image below is how I want the menu to appear, is it possible? So when the user clicks the burger bar the menu comes out on the left next to the burger bar. At the moment it drops down below the menu bar. Here is the bootsnip http://bootsnipp.com/user/snippets/M3gdX example.
Below is my code (HTML):
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/"><img id="header-image">Logo</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</a>
<ul class="dropdown-menu" id="number-list">
<ul class="list-inline">
<li class="active">Home</li>
<li>Blog</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</ul>
</li>
</ul>
</div>
</nav>
The CSS code:
.menu-bar {
width: 22px;
height: 2px;
background-color: white;
margin: 6px ;
border-radius: 1px;
}
#number-list.dropdown-menu {
width: 300px;
}
.dropdwon-toggle {
margin-right: 10px;
}
I am new to this and can't seem to find anywhere an example of a drop left menu that doesn't slide out the page or come over the page.
You can set float: left to your li elements to make it horizontal in one line.
<ul class="list-inline lefties">
<li class="active lefties-item">
Home
</li>
<li class="lefties-item">
Blog
</li>
<li class="lefties-item">
Gallery
</li>
<li class="lefties-item">
About
</li>
<li class="lefties-item">
Contact
</li>
</ul>
CSS
ul.lefties:after {
clear: both;
display: block;
content: "";
}
.lefties-item {
float: left;
}
I want to make something like this
When I made 2 navbar, there is a white gap separating them, how to remove this gap?
I've read somewhere that if I change the size of the navbar's elements will automatically increase its height , but it didn't work out.
If I need to make a custom class for a navbar, what properties should I change?
edit :
<nav class ="navbar topNavbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login </li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up </li>
</ul>
</div>
</nav>
<nav class="navbar botNavbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Website name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Collections</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<style>
.topNavbar {
background-color: #F60;
}
.botNavbar {
background-color : #F90;
}
</style>
Bootstraps .navbar has a 20px bottom margin by default.
So you could do:
.topNavbar {
background-color: #F60;
margin-bottom: 0;
}
Bootply
I'm using Bootstrap to create a navbar in the top of the page, but i'm facing some problems:
After opening the navbar dropdown, I need to have a option list, and a image positioned to the right of the list. This image needs to have the same height of the list, just like in the following image (in portuguese, but easily understandable).
I achieved this setting a fixed height and width on the image, but the list can grow up and isn't a good option adjust it manually.
Another solution is to insert a div containing the list and the image, and set the image size to 100%, but when I do this, the dropdown isn't achieved anymore (I think i'm breaking the structure that Bootstrap uses to toggle the dropdown, am I right?).
How can I achieve this solution?
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav top-elements">
<li id="dropdown-produtos" class="dropdown">
Nossos Produtos<span class="caret top-caret"></span>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
<li class="dropdown-item-active">
texto1
<ul class="dropdown-menu img-dropdown">
<img src="assets/img.png">
</ul>
</li>
<li class="dropdown-item">
texto2
</li>
<li class="dropdown-item">texto3</li>
<li class="dropdown-item">texto4</li>
<li class="dropdown-item">texto5</li>
</ul>
</li>
</ul>
</div>
This should work:
<ul class="nav navbar-nav">
<li>Elemento 1</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
<ul class="dropdown-menu another-class">
<!-- ROW -->
<div class="col-md-12">
<!-- Column 1 -->
<div class="col-md-6">
<ul class="list-unstyled">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<div class="drop-image">
<img src="./img/img.jpg" class="img-responsive" />
</div>
</div>
</div>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Basically what I'm doing is create a div with a full width inside the dropdown element that comes as default in Boostrap. Inside this Full width row I create two columns with bootstrap col-md-6 class (you can do this with col-lg or col-sm or col-xs too) Inside this columns I add my content normally.
I created a class in the column 2 named "drop-image"; use this class to modify the img inside.
Hope it helps!
Btw, don't forget to style your dropdown (in the example I mark it with a class named another-class) so you define the position and width.
This might solve your problem, it's based off this plugin Yamm3!. See example Snippet.
Change this CSS rule if you need to make the dropdown wider because of the length of the link text. >
.list-unstyled, .list-unstyled ul {
min-width: 180px
}
body {
padding-top: 60px;
color: #666;
}
/* menu styes */
.list-unstyled,
.list-unstyled ul {
min-width: 180px
}
.list-unstyled > li {
padding-top: 10px;
}
.list-unstyled > li > a {
color: #555;
text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
background: #f5f5f5;
}
.yamm .yamm-content {
padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
#media (max-width: 767px) {
.yamm-content .list-unstyled > li img {
margin-top: -180px;
float: right;
}
}
<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" />
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Grande Menu
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos Dois<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="alert alert-warning">Olá</div>
</div>
I'm using twitter-bootstrap, and I have the following code to generate an navbar with an avatar in a dropdown:
Check this fiddle: http://jsfiddle.net/X4drb/embedded/result/
HTML
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <i class="fa fa-bars"></i>
</button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hello
</li>
<li>Stack
</li>
<li>Overflow
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <img id="avatar" class="img-circle mr1" src="http://placehold.it/30x30&text=photo" > John Doe <b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
CSS
.caret {
margin-left: 5px;
}
#avatar, .navbar-brand {
margin-right: 5px
}
.navbar-nav {
height: 100%;
margin: 0;
padding 0;
}
But, as you see, the list of the links with Hello, Stack and Overflow doesn't reach the end of the navbar:
Do you have any idea to fix it? I tried putting height: 100%; padding: 0; margin: 0 to the list items of the links, but nothing changes.
Try line-height?
ul.nav.navbar-nav li a:link {
line-height: 32px;
}
http://jsfiddle.net/X4drb/9/
Your ul is not getting proper height. Give the height of ul same as outer div.
im trying to center my navbar with no luck at all.. Anyone here knows how to center it?
Here's my code:
<nav class=" navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
I cant find the rows in bootstrap.css, but if you really need the code from the css doc, i try to find it.
This one works :- DEMO
<div class="text-center">
<nav class=" navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
</nav>
</div>
CSS
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
}
Try to add css .navbar-nav li {display:inline-block;} <-- this let all <li> tags lined up.
Check this FIDDLE to view more details.
Let me know if this was what you're looking for :)
Updated 2017
In Bootstrap 3.x, you can use the nav-justified class... No custom CSS required:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
</div>
</nav>
https://www.bootply.com/109568
Bootstrap 4 there is the nav-fill class...
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.bootply.com/bjgAw3F3Ps
FIDDLE
just a little fix to what #Fiskolin has done, if you want it to always be centered you should make sure that the UL will center all text by adding this to it.
ul { text-align:center; }
I am using this for Bootstrap v3.
#media (min-width: 768px) {
.navbar ul {
float: unset !important;
justify-content: center;
display: flex;
}
}