I am trying to achieve a navbar that is equally divided into 12 columns so that each li takes up one section each. I would like to have an image in my starting column. This is what I have so far:
html, body {
height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
padding-top: 65px; /*50px for the height of the navbar + 37px for the offset*/
}
.navbar-inverse {
background-color: #06658D;
border: 0;
}
.navbar-inverse .navbar-nav > li > a {
color: #FFF;
width: 100px;
line-height: 25px;
}
.navbar-inverse .navbar-nav > li > img {
max-height: 25px;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="css/layout.css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container row">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="col-md-1"><img src="images/Home.png" alt="home"></li>
<li class="col-md-1">Column 2</li>
<li class="col-md-1">Column 3</li>
<li class="col-md-1">Column 4</li>
<li class="col-md-1">Column 5</li>
<li class="col-md-1">Column 6</li>
<li class="col-md-1">Column 7</li>
<li class="col-md-1">Column 8</li>
<li class="col-md-1">Column 9</li>
<li class="col-md-1">Column 10</li>
<li class="col-md-1">Column 11</li>
<li class="col-md-1">Column 12</li>
</ul>
</div>
</div>
</nav>
<div class="container body-content row">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
These two combined however result in this:
AS you can see I have two issues. Firstly the alignment of the image is all wrong as I would like that to be central both horizontally and vertically. Secondly my navbar is not divided up into 12 equal elements as they are not utilizing the full width of the navbar.
Try using display table property. I don't think you're gonna get equal li sizes but you'll get a result none the less.
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
text-align: center;
}
Related
I am trying to make navbar in bootstrap to be fixed left, like on this link.
Anyway, it is working, but when I add block content of the leaflet map, my navbar is still there, but I can't click on it. Also, I don't get pointer mouse when I cross over the link. Here is code which I changed:
<!--NAVBAR-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Sub Menu1</li>
<li>Sub Menu2</li>
<li>Sub Menu3</li>
<li class="divider"></li>
<li>Sub Menu4</li>
<li>Sub Menu5</li>
</ul>
</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
<div class="container col-sm-12">
<div class="row">
{% block map_content %}
replace me
{% endblock map_content %}
</div>
</div>
Before this, I tried more elegant solution. I used bootstrap4 and tried something like this:
<nav class="navbar navbar-inverse fixed-left">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'index' %}"><p class="logo_name">page name</p></a>
</div>
<ul class="nav navbar-nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</nav>
But it doesn't work, in this case, my navbar is fixed top, and not left.
try adding these things. Add extra CSS to modify existing class.
Add this extra css:-
<style>
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
</style>
I am trying bootstrap to make a navbar .I am struggling to make the login and logout right aligned .how could i do it???i have uploaded the html and css code
Html code:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Log-out</li>
<li>Log-in</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
CSS code:
<style>
.navbar navbar-inverse .nav navbar-nav ul li a:nth-child(5):nth-child(6)
{
background-color:green;
float :right;
}
</style>
It's the<li> that's 5th and 6th and not <a>. Also, your selector is wrong in CSS (there's no <navbar-inverse> tag, which is what you meant). Kindly correct it:
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(5) a,
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(6) a {
background-color: green;
float: right;
}
Snippet
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(5) a,
.navbar.navbar-inverse ul.nav.navbar-nav li:nth-child(6) a {
background-color: green;
float: right;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Log-out</li>
<li>Log-in</li>
</ul>
</div>
</nav>
Preview
You need to select the nth li, not the nth a, because there is always only one a.
.navbar-nav > li:nth-child( 5 ),
.navbar-nav > li:nth-child( 6 ) {
text-align: right;
}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Log-out</li>
<li>Log-in</li>
</ul>
I found that you need to do several things to get this working:
1) Use float:right; on the 5th and 6th Li elements,
2) In your case it is floating right within the UL but the UL is not the full width of the nav bar. To correct this adjust the UL to be full width of the nav bar.
I have implemented the solutions users have suggested above on Code Pen and none work in your situation until you adjust the width of the UL, take a look:
.nav{
width:100%;
}
https://codepen.io/anon/pen/EvZXJM
float: left;
and
display: inline;
are both failing to work.
What am I doing wrong? How can I make this navigation bar horizontal?
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
put your css inside style tags or an external css file and include it in the header section of your html
<style>
ul li{ display: inline;}
</style>
try the following code snippet, it might help you
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
list-style-type : none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About </li>
<li id="navbar" class="active">Portfolio </li>
<li id="navbar" class="active">Contact </li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Changed
.navbar li {
to
li.navbar {
li.navbar {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
Is this what you are looking for?
Solved:
The
<li id="navbar" class="active">Home</li>
elements need the corresponding CSS to be
#navbar
and NOT
.navbar li
.navbar li should be used in the CSS for the html class attribute class="navbar li" whereas #navbar should be used the ID attribute
When I changed that, the CSS styling was applied to the html with the corresponding id attribute.
It seems you're doing things the right way, but your code sample misses some tags :
<html>
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-link" class="active">Home</li>
<li class="navbar-link" class="active">About</li>
<li class="navbar-link" class="active">Portfolio</li>
<li class="navbar-link" class="active">Contact</li>
</ul>
</div>
</nav>
<style>
.navbar li {
margin: 5;
padding: 0;
width: 80;
float: left;
}
</style>
</body>
</html>
will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using <style> . If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your css and to link it with your html document.
EDIT :
The css rule : .navbar li will find the navbar class and find all its li childs, so you can remove ids on each li and replace them by a class name
I hope it may help
What do I have to change to my Bootstrap navbar so that the dropdown on the right works on the smaller screen as on the larger screens:
FULL CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHOWCASE: Bootstrap Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.container a {
color: yellow;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
</body>
</html>
Issue with Dasith's solution:
The fix for this is to simply add a background color:
.navbar-nav .open .dropdown-menu {
background-color: #fff;
Issue #2 with Dasith's solution:
Quick inspection through chrome dev tools got me to make this fix :
#media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
position:absolute;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #000;
}
}
Here's a adjusted version with the above edits for a better understanding how it plays out
here..
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>