Nathan Redbridge
Reputation: 23
Add fixed navigation item at bottom of vertical navigation bar bootstrap
I'm using the SBAdmin template for Bootstrap and currently have a vertical navigation bar along the left hand side of the screen. I do, however, want a navigation item at the bottom of the user's screen which I can currently achieve by appending style="bottom: o; position: fixed;" in the <li> tag, as follows:
<li style="bottom: 0; position: fixed; overlay: none;">
<a href="#"><i class="fa fa-fw fa-paper-plane-o"></i> Bottom Item</a>
</li>
However, as expected, when the user's screen is smaller and the navigation items get closer together, they overlap.
Smaller screen/zoomed in viewing
So, if the screen is smaller, then the item will be located at the bottom of the navigation items, but if it's big then it will be stuck at the bottom.
Thanks.
Upvotes: 1
Views: 7689
Answers (1)
tao
Reputation: 90068
You should remove the inline style from your li and add this CSS to your project:
@media(min-width:992px) {
.side-nav>li:last-child {
position: absolute;
bottom: 0;
}
}
The li will stay on the bottom on md and lg screens and will be grouped with the rest on sm screens. If you want it grouped on md too, change 992px to 1200px in the code above.
Demo:
@media(min-width:992px) {
.side-nav>li:last-child {
position: absolute;
bottom: 0;
}
}
@media(min-width:768px) {
#page-wrapper {
min-height: calc(100vh - 50px);
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="http://ironsummitmedia.github.io/startbootstrap-sb-admin/css/sb-admin.css" rel="stylesheet">
<link href="http://ironsummitmedia.github.io/startbootstrap-sb-admin/css/plugins/morris.css" rel="stylesheet">
<link href="http://ironsummitmedia.github.io/startbootstrap-sb-admin/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin/js/jquery.js"></script>
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin/js/bootstrap.min.js"></script>
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin/js/plugins/morris/raphael.min.js"></script>
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin/js/plugins/morris/morris.min.js"></script>
<script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin/js/plugins/morris/morris-data.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.html">SB Admin</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
<ul class="dropdown-menu message-dropdown">
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-footer">
<a href="#">Read All New Messages</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
<ul class="dropdown-menu alert-dropdown">
<li>
<a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
</li>
<li>
<a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
</li>
<li>
<a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
</li>
<li>
<a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
</li>
<li>
<a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
</li>
<li>
<a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
</li>
<li class="divider"></li>
<li>
<a href="#">View All</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active">
<a href="index.html"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> Charts</a>
</li>
<li>
<a href="tables.html"><i class="fa fa-fw fa-table"></i> Tables</a>
</li>
<li>
<a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a>
</li>
<li>
<a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
</li>
<li>
<a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="#">Dropdown Item</a>
</li>
<li>
<a href="#">Dropdown Item</a>
</li>
</ul>
</li>
<li>
<a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
</li>
<li>
<a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
</div>
</div>Upvotes: 4
Related Questions
- Flushing footer to bottom of the page, twitter bootstrap
- Add border-bottom to table row <tr>
- How to add a bottom solid border in a responsive toggled navigation bar
- Twitter Bootstrap - add top space between rows
- vertical-align with Bootstrap 3
- Add Bootstrap Glyphicon to Input Box
- twitter bootstrap navbar fixed top overlapping site
- Samsung Galaxy S8 navigation bar overlays fixed position div
- Vertical fixed navigation when sections aren't full height