Having bootstrap navbar have elements on top and bottom of header - html

Can't quite seem to wrap my head around a bootstrap nav having elements on bottom and top of navbar, while still utilizing the collapsable navbar.
Here is what I've tried: Fiddle
As you can see, I was able to achieve the text on top and bottom of navbar (while still using the collapsable navbar feature), but when you look at it in mobile (as in, when the menu is collapsed and you click on the hamburger logo), it's completely messed up.
So this has me wondering if perhaps I'm not approaching this the right way?
Here is the CSS:
#mainNavBarTop {
position: absolute;
margin-top: -10px;
top: 0;
left: 0;
}
#mainNavBarBottom {
position: absolute;
margin-bottom: -10px;
bottom: 0;
left: 0;
}
and HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" 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><img src="" /></div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="mainNavBarBottom">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<ul class="nav navbar-nav" id="mainNavBarTop">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</div>
</nav>

If you want the navigation links to display over multiple lines on a desktop view, all you have to do is specify a width for the navbar that accommodates for the image, and also add enough items to the dropdown so that they overflow.
Optionally, you can have the links pressed up against the right rather than the left by adding float: right to the li elements of the navbar. Note that this will reverse the order of the items in the list, so you may wish to list the links in reverse order in the HTML itself if you opt for this.
You can see this by expanding the snippet below, or by viewing the JSFiddle here. The links all stay directly below one another in the collapsed menu, though occupy two lines in the desktop view. Expanding the JSFiddle to the maximum width shows that the links will revert back to a single line when there is enough space to contain them.
#media (min-width: 768px) {
.navbar-nav.pull-right {
width: calc(100% - 120px); /* 100% - image width */
}
.navbar-nav>li {
float: right; /* Optionally align items to the right */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
Hope this helps! :)

Related

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 to make bootstrap navbar smaller in width?

I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?
main.html
<div class="col-md-10">
<nav class="navbar navbar-default container-panel">
<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>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-file"></span><span class="caret"></span>
<ul class="dropdown-menu">
<li><span ng-click="createXml()">Create new BPMN Diagram</span></li>
</ul>
</li>
<li><span class="glyphicon glyphicon-folder-open"></span></li>
</ul>
</div>
</div>
</nav>
</div>
main.css
.navbar.container-panel {
width:554px;
margin-left: 760px;
}
Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.
.navbar.container-panel {
width:60vw;
margin-left: 760px;
}
or
.navbar.container-panel {
width:60%;
margin-left: 760px;
}

can i use Bootstrap container class inside row?

I want to know can i use container class inside row. Actually i'm new using bootstrap so i want to know if i use container inside row so it's fine or not
<main class="container-fluid">
<header>
<div class="row">
<nav class="navbar dark-r">
<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="#">Brand</a> </div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
<nav class="nav light-r">
<ul class="list-unstyled list-inline">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</nav>
</div>
</header>
</main>
i'm also using nav inside nav is this right? or wrong or i have to use div except it.
Yes, you can use container class inside row class. Since all that container class does is add's 15px padding on sides and centeres itself using margin auto on left and right. Thus there is no reason why you would not be able to use container inside your row class.
Short answer, yes.
Regarding Bootstrap 4:
this is what the .row, .container and .col classes do :
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
.col-{size} {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Remember that .row and .nav classes both turn the direct children into flex items
To answer your second question about using multiple <nav> tags, it's better to use the .nav class as part of a <ul> tag. For example, please see below for a basic navbar which I've pulled from the W3Schools Bootstrap 3 tutorial which will clearly explain what markup you need to use.
<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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
As you can see, the markup uses a single <nav> tag which basically acts as a wrapper for the two <ul> tags.
Hope this helps!
P.S - It's not compulsory to use the .navbar-right class in the second <ul> tag in your markup if you want a different navigation layout!

Responsive Bootstrap Navbar

I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.
I have searched Stack overflow looking for ways to make this work, like this question, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.
Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?
EDIT
Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:
Just a note that I am using django to serve the html, hence the syntax for the image src.
#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand" href="#">
<img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
So you're looking to do something like this, with the image fitted:
HTML
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand navbar-center" href="#">
<img src="http://placehold.it/100x40" alt="Logo Here">
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
CSS
.navbar-brand {
float: none;
padding: 5px;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
Demo: JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar bootstrap</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Navigation bar is coolest component of bootstrap, you can easily create cool responsive navigation header for your website.
For information and detail please see this article..
steps to create navbar in bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo / SiteName</a>
</div>
<div class="collapse navbar-collapse" id="testNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>

makes nav-pills collapsable just like nav-bar in bootstrap

we are developing an application and we are using twiiter bootstrap 3
we have created a navigation bar with nav-pills
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>
<a href="#" id="welcome">
Welcome text ...
</a>
</li>
<li>Kitchen</li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars?
thanks in advance
First, you need to include HTML for the menu button once your menu collapses.
<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>
Then, you need to wrap your nav-pills in a div containing Bootstrap's collapse class.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>Welcome text ...</li>
<li>Kitchen</li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
</div>
You can then wrap all of this in a fluid-container and Bootstrap's navbar navbar-default with role=navigation.
Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: show.bs.collapse and hide.bs.collapse.
//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
$('.nav-pills').addClass('nav-stacked');
});
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
Working Demo Here
Another method to try is to set navbar li to 100%:
#media (max-width: 768px) {
#navbar li { width:100%; }
}
Complete Solution
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-color: linen;
}
.nav {
background-color :#722872;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar {
background-color :#722872;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
OR
See it in CodePan
#Tricky12 has a good solution, i used for myself, just changed the last part.
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
The part: hidden.bs.collapse trigger when the menu is fully closed, while hide.bs.collapse trigger when it starting to close.
if you trigger the .removeClass('nav-stacked'); before collapsed menu it fully closed, will show the horizontal menu for a fraction of a second before is fully closed.
Hope this will help someone.
The .nav-justified class of bootstrap will take care of everything. This will resize the links in browsers wider than 768px. Smaller than that, the links will be stacked. Simply add it to the element and you are good to go.
<ul class="nav nav-pills head-menu nav-justified">
...[rest of your code stays the same]...
Doesn't address the question how to collapse the items, I am stating how to stack them. So my answer might not help, but I think it contributes, hopefully.