Why is my bootstrap navbar not displaying inline? - html

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>

Related

Align menu right in bootstrap

I'm newbie. I tried to move nav to the right and logo must stay in left side.
I dont why I tried all ways. i am using bootstrap 4.7 and 4.7 nav bar code in html. I tried all code. e.g: ms-auto, ml-auto, justify-content-end in ul class, but still cann't success.
Help me to sort out this problem. Please check attached .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- custom css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<div class="container-fluid grey">
<div class="row">
<div class="container pink">
<div class="row">
<div class="head-top pt-2">
<div class="col-md-6 pt-5">
<div class="logo">
<img src="assets/images/logo.png" class="logo">
</div>
</div>
<div class="col-md-6 green">
<nav class="navbar navbar-expand-lg">
<!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- <img src="assets/images/menu.png" class="menu-icon"> -->
</div>
<!-- head-top -->
</div>
</div>
<!-- container -->
</div>
</div>
<!-- container-fluid -->
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.logo{
width: 50px;
}
.menu-icon{
width: 30px;
}
.grey{
background-color: #8B8B8B;
}
.pink{
background-color: #EC8CBE;
}
.green{
background-color: #65D790;
}
It’s not clear what you were trying to do with the rows and columns for your navbar, so I started with a clean copy of Bootstrap’s 4.6.0 navbar.
If you want the menu items to be on the left, change the margin class on the unordered list from mr-auto to ml-auto.
And it’s best to put the active class on the list item, not the link.
.bg-pink {
background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<div class="container-lg">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I used a container-lg for the nav content so the logo and menu won't continue to spread out on larger screens.
As I understand it, you want the menu all the way to the right - next to the logo, but sticking to the right side? Right?
Well, I achieved this by putting the following css into the style.css file:
.pt-2 {
display: flex;
}
.navbar-expand-lg {
justify-content: flex-end;
}
The menu will be a bit above the height level of the logo, but you can play around with that if you want. Either raise the logo a little, or push down the menu.
If you wanna push down the menu using margin, i found that
margin-top: 42px;
was the right amount of pixels.
Hope it helped.

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 navbar: Width of left element affects position of element in the center

I'm new to bootstrap 3. At the moment I want to allign my navbar to the center. I did this with this approach, which works fine.
Now my Problem is that the width of my navbar-brand element affects the position of the centered stuff,e.g. the elements are moving to the left, if the branding gets bigger. Is there a way to position a element of the navbar at the "real" center of the screen?
It looks like that at the moment:
But I want at the real center of the screen like that, but with the brand:
My html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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 navbar-left" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Stuff</li>
</ul>
</li>
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My CSS:
#media (min-width: $grid-float-breakpoint) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Thanks for your help!
Making the root element of the navbarbrand have an absolute position seems to give the desired effect. This causes your nav links to be centered without regard to the navbarbrand element. NOTE: If your 'brand' text length gets too long, it will overlap the nav links. https://jsbin.com/juyanijeku/edit?output
.navbar-header {
position: absolute;
}
I've tried something like this
a.navbar-brand {
display: block;
float: none;
text-align: center !important;
}
.nav> li {
display:inline-block !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header text-center">
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav text-center">
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

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

Bootstrap center navbar

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