I've been learning to use bootstrap so I decided to use it to create a Navbar. So, I decided to try and centre it so I looked online for a solution but none of them work. So please could you advise me on what to do.
HTML:
</head>
<body>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">Items <span class="sr-only"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li role="separator" class="divider"></li>
<li>Item 2 </li>
<li role="separator" class="divider"></li>
<li>Item 3</li>
</ul></li>
</ul>
</div>
Current CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
It looks like the CSS you have and code you have will work fine. Just wrap your div in a nav element.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse">
... Rest of Your Code ...
</div>
</nav>
try use this CSS code to solve your problem:
.navbar-collapse .navbar-nav{
margin: 0 auto;
width: 300px; /*(example - [width: auto; is wrong])*/
}
.navbar-collapse{
margin: 0 auto;
}
.navbar-collapse li{
margin: 0 auto;
}
If you are using bootstrap, why are you using your current CSS for navbar? Just use what bootstrap is offering.
I am not sure whether you mean to center the text in the navbar or center the navbar all together, but this is found on bootstrap's website
<body>
<div class="container">
<!-- Static navbar -->
<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" aria-expanded="false" aria-controls="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="#">Project name</a>
</div>
<div id="navbar" 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">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Related
I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste code from the W3Schools examples and the Bootstrap website. I don't know what else to do. Please help.
This is the W3Schools example code:
<nav class="navbar navbar-default">
<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>
</ul>
</div>
This is example code from the Bootstrap website:
<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">
<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 -->
Both do not work. And yes, I've triple checked my <link> and <script> tags.
Edit: here is my CodePen
First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As someone said - remove bootstrap 4 from loaded CSS files and it will work
I'm trying to figure out two issues.
1.
There's a lot of examples I've seen on how to center an image in the middle of a bootstrap navbar, however, I'm having issues figuring out how to prevent the image from overlapping links when the screen is shrunk down to a smaller size (without triggering hamburger menu)
Example:
JS Fiddle Example
If you shrink the screen down slowly you will see the center icon overlap the 'Reporting' link. How do I prevent this from happening? Is there a way for the image to recognize the edge of the last link and no overlap it?
2.
Is there a way for the navbar to resize in height based on the height of the image instead of the image overlapping the navbar?
Code:
<style>
.navbar-brand.navbar-center {
position: absolute;
left: 50%;
display: block;
text-align: center;
padding: 0px;
}
.navbar-toggle {
z-index:3;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</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="">Profile</li>
<li class="">My Home</li>
<li>Administration</li>
<li class="dropdown">
Reporting <b class="caret"></b>
<ul class="dropdown-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>
<a class="navbar-brand navbar-center" href="http://disputebills.com"><img height="78" width="78" style="margin-right: 10px; padding: 0;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</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 class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I am trying to add a separator in the collapsed nav when viewed on mobile. Ideally the nav would look exactly the same as it does not when not collapsed, but when collapsed would have a separator between "About" and "Log In".
Here is the code for the nav:
<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="#main-navbar" 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="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</nav>
JSFiddle
I have tried adding <li role="separator" class="divider"></li> where I want the separator, but it does not show up:
<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="#main-navbar" 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="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="separator" class="divider"></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</nav>
JSFiddle
How can I add a separator for the collapsed nav?
This separator would hopefully look very similar to that of a dropdown in a nav:
In Bootstrap v4.0.0-alpha.6, you can use
<div class="dropdown-divider"></div>
jsFiddle
It does not show up as It is defined as follows in Bootstrap css:
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
And you do not have .divider under .dropdown-menu
What you should do ?
#media (max-width:767px){
.divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
}
You have to put this code:
<li role="separator" class="divider"></li>
between your own "< li >" tags.
Example:
<ul class="dropdown-menu" aria-labelledby="drop2">
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
<li role="separator" class="divider"></li>
<li> Your own Li Tags</li>
<li> Your own Li Tags</li>
</ul>
Boostrap 4.1 Solution
Was trying to accomplish this in a BS4.1 Navbar component and ended up here (via Google). Since .divider does not exist in this version, I used <hr> to achieve the desired result...
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#generator">Social Links</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/facebook-link-generator/#opengraph-generator">Open Graph</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/twitter-link-generator/#twitter-card-generator">Twitter Cards</a></li>
<li class="nav-item"><a class="nav-link" href="/json-ld-generator#json-ld-generator">JSON-LD</a></li>
<li class="nav-item"><hr class="border-top"></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#donation">Feeling Generous?</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#contact">Need a Developer?</a></li>
</ul>
Bonus: This <hr> did not affect expanded display since its margins place it behind the next .nav-item element :)
Note: .border-top was added to the <hr> for lighter color.
you may insert an
<hr>
Tag instead of your divider like this:
<ul class="nav navbar-nav navbar-right">
<hr>
<li>Log In</li>
<li>Sign Up</li>
</ul>
Please tell me if it is as you wanted.
If you don't want to touch css there is little hack for it :D.
Instead of
<li role="separator" class="divider"></li>
use this
<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>
Bootstrap gives forms 1px borders on top and bottom when collapsed. You can use this and insert empty form which is invisible while expanded but with one border while collapsed.
I can't understand how to code this nav with bootstrap:
As you can see it composed of a brand image on the left, some space and then the two rows that should fit the brand length and should also fit the window width.
I did this but it doesn't work fine. When i resize the window sometimes nav goes off of the window.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
<div class="container-fluid" id="nav">
<div class="row">
<div class="navbar-header"> <img src="~/Images/logo.png" class="logo" width="308" height="130" alt="" style="float:left; margin-left:20px;margin-right:100px;"> </div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
Let's start with the Default navbar from the Bootstrap's documentation.
Turn the brand image into a simple non-floating block.
Leave an empty space on the right side only.
Wrap all menu items into one <ul></ul> but make them higher.
Force the 5th element to start new line. Clear a mind, open a heart. All items are left-floating, so clear: left; will be enough.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-brand {
display: block; /* 1. */
float: none;
height: auto;
margin: 0 !important; /* 2. */
padding: 0 20px 0 0;
}
#media (min-width: 768px) {
.navbar-nav>li>a { /* 3. */
line-height: 21px;
padding-top: 22px;
padding-bottom: 22px;
}
.clear-left { /* 4. */
clear: left;
}
}
<nav class="navbar navbar-default">
<div class="container">
<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="#"><img src="//placehold.it/308x130/c69/f9c/?text=Brand" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li class="clear-left">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In the above HTML file, modify <ul class="nav navbar-nav"> to
<ul class="nav navbar-nav pull-right">
and you are done putting it to right side.
You can use CSS Flexbox for this. This will help you solve all your vertical and horizontal centering/spacing issues as well.
Have a look at this Codepen.
Or have a look at the snippet below (Use full screen while previewing to view the desktop view):
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-content-holder {
display: flex;
align-items: center;
}
.navbar-collapse {
flex: 1;
}
.custom-nav-links {
display: flex;
flex-direction: column;
}
#media screen and (max-width: 767px) {
.navbar-header {
flex: 1;
}
.navbar-collapse {
position: absolute;
top: 50px;
left: 0;
width: 100%;
padding: 0 30px;
background: #F8F8F8;
}
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-content-holder">
<!-- 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">
<div class="navbar-right custom-nav-links">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</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>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</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>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.navbar-content-holder -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hope this helps!
I am trying this navbar out with a dropdown. When I try to build it into my webservice I don't get the dropdown working. I can click on it but nothing happens there. This is my current setup:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Foo</li>
<li class="dropdown">
Bar<span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Foo</li>
<li role="separator" class="divider"></li>
<li>Bar</li>
<li role="separator" class="divider"></li>
<li>Baz</li>
</ul>
</li>
<li>Baz</li>
</ul>
</div>
</div>
</nav>
The navbar looks correct and is styled like in the documentation but there no points that are getting dropped down.
Add J query & Bootstrap File
Remove this class collapse
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
<div class="container-fluid">
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Foo</li>
<li class="dropdown">
Bar<span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Foo</li>
<li role="separator" class="divider"></li>
<li>Bar</li>
<li role="separator" class="divider"></li>
<li>Baz</li>
</ul>
</li>
<li>Baz</li>
</ul>
</div>
</div>
</nav>
Navbar
Default navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
Here is the plugin: http://getbootstrap.com/javascript/#collapse
From: http://getbootstrap.com/components/#navbar
Because you are missing responsive dropdown
HTML
<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>
DEMO HERE