A Pen by srhise.

Bottom-Pinned-Mobile-Navigation-With-Bootstrap.markdown

Bottom Pinned Mobile Navigation With Bootstrap

A Pen by srhise on CodePen.

License.

index.html

 <div class="container" id="drawernav">
        <div class="row">
            <div class="col-md-12">
                <a href="#" class="btn btn-primary">Item 1</a>
                <a href="#" class="btn btn-primary">Item 2</a>
                <a href="#" class="btn btn-primary">Item 3</a>
                <a href="#" class="btn btn-primary">Item 4</a>
            </div>
        </div>
    </div>
    <div class="container" id="mainnav">
        <div class="row">
            <div class="col-md-12">
                <a id="navigation-link" href="#" class="btn btn-primary">Navigation <i class="fa fa-plus-circle"></i></a>
            </div>
        </div>
    </div>

script.js

$(document).ready(function () {
$('#navigation-link').on('click', function() {
	$('#drawernav').slideToggle(440, function(){
		
	});
});
});

style.css

@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css);

#mainnav {
	margin: 50px auto 0 auto;
  position: fixed;
  bottom: 10px;
	width:100%;
}

#navigation-link {
	width:100%;
  font-size:24px;
}
#drawernav {
  display:none;
	margin: 0px auto;
  position: fixed;
  bottom: 58px;
	width:100%;
}
#drawernav a.btn {
	width:100%;
	border-radius:0px;
  border:1px solid #eee;
  border-top:none;
  font-size:20px;
}