Bootstrap center navbar - html

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;
}
}

Related

Bootstrap - Position 1 item to the left while preserving another item's center position

I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)

Bootstrap Fixed Navbar Links to stay on same line as Brand

Before Start, I have searched for the last few hours, found several replies but none that fixed this issue.
I only have one link, and I have a fixed to top navbar. I want the Link to stay on the same line as the Brand in mobile/smaller screens.
Right now on mobile (Ref image below):
I have tried floating it right to see if that helped, but it didn't.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
You only need to delete collapse navbar-collapse classes and use a custom class. You can name it custom-navbar-nav. Finally, add the CSS showed here. If you definitely want your link on the top, you need to use media queries.
.navbar-header {
display: inline-block;
}
.custom-navbar-nav {
display: inline-block;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="custom-navbar-nav">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>

Navbar element drops to second line instead of aligning to the right

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.

Why is my bootstrap navbar not displaying inline?

Here is my html using bootstrap (I'm sure bootstrap is installed correctly)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
When it displays the three links are being displayed as block elements.
This is because in Bootstrap the css for li is this:
.nav>li {
position: relative;
display: block;
}
But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.
EDIT: Updated the snippit to work as requested (see comments below this answer)
.navbar .container-fluid>.navbar-header {
float: left;
margin-right: 10px;
}
.navbar .navbar-nav {
float: left;
margin: 5px;
}
.nav>li {
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div style="display: inline-block;">
<ul class="nav navbar-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4. The flex layout seems to be columnar by default in my ecosystem as well.
The most direct override for this use case:
.navbar-nav {
flex-direction: row;
}
Just ran into this issue with BS4. Learned I needed to add navbar-expand-lg class to my nav.
<nav class="navbar navbar-expand-lg">
I'm not saying the other answers are incorrect in any way, but all that is really needed to accomplish the original question is this entry in the subtheme's CSS file:
.nav.navbar-nav li {
float: left;
}
It should be noted that the class(s) before the li will vary depending on selections in the Appearance section of the theme and other factors. For example, right out of the box the class would have been .menu.nav li
I was facing the same problem.
Try this:
.navbar-nav {
display: inline-block;
}
.navbar-nav>li {
display: inline-block;
}
It worked for me
If you want like this way check this DEMO
<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_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>
</div>
<div id="top_navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4, the inline navbar can be achieved by adding class "nav-item" on list elements and class "nav-link" on a tags like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<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>
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
So if your nav class is like that
change lg to sm or if -sm then change into -lg
You can make an inline navbar easily with this custom CSS class:
Css:
.nav.inline-navbar>li{
display: inline-block;
}
Now use it in your Html:
.....
<ul class="nav navbar-nav inline-navbar">
......
</ul>
.....
For a quuick modify, I add style="display: inline" in the below position:
<div class="collapse navbar-collapse" id="navbarSupportContent" style="display: inline">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('single')">One Line Param</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('multi')">Multi Line Param</a>
</li>
</ul>
</div>
just simply add this into your CSS and get the elements in one line
.navbar-nav {
display: inline-block;
}
.navbar-nav li {
display: inline-block;
}
In the snippet below, the highlighted line used to be <div class="nav navbar-nav">. In this case, just removing 'navbar-nav' solved the problem to me.
<nav class="navbar fixed-top" id="homehead">
<img class="navbar-brand" src="" height=50 width=50 alt="">
THIS LINE-> <div class="nav">
<a class="nav-item nav-link" href="">Link1<span
class="sr-only"></span></a>
<a class="nav-item nav-link" href="">Link2</a>
<a class="nav-item nav-link" href="">Link3</a>
<a class="nav-item nav-link" href="">Link4</a>
</div>

How to display logo in center at boostrap for mobile device?

I am trying to develop a website using twitter bootstrap. I use a image as logo in navbar using this code
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/bradley.png" alt="" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="home current-page">Swap</li>
<li class="episodes">Tales</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
It is ok for laptop. But for mobile device and tab i want that logo will be center. Please tell me How can i do that? This is my site https://dl.dropboxusercontent.com/u/168659703/project/index.html
.navbar-header {
margin: 0 auto;
display: table;
/* margin-right: 50px; */ remove this or add margin-right: auto !important;
}
http://jsfiddle.net/L64Pa/
Here's an update for Bootstrap 4 since the original accepted answer is now a broken fiddle.
The flexbox utils that are now included in Bootstrap 4 can be used to responsively change the alignment of content. For example, here the brand is centered on mobile:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand mx-0" href="#">
Brand
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/go/DPyf5WFg99
.navbar-header
{
display:block;
text-align:center;
}
You could do a semi "hack" style CSS in your main.css file with:
#media only screen and (max-device-width: 480px) {
.navbar-brand {
float:none !important;
}
.img-responsive {
margin:0 auto !important;
display:block !important;
}
}