This code snippet includes CSS for styling a navbar, as well as HTML and Angular directives for creating navigation elements.
If you're looking to center the <li> tags within the <nav> elements and increase the size of their IcoFont icons, you can try adding the icofont-4x class to the <i> tag.
HTML Code:
// JavaScript Libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
// Stylesheets
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class="col-xl-12 col-lg-12 filter-bar">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
// Navigation Items
</ul>
</nav>
<nav class="navbar navbar-light height bg-faded m-b-30">
<ul class="nav navbar-nav">
// More Navigation Items
</ul>
</nav>
</div>
</div>
CSS Styling:
.navbar.height {
min-height: 180px;
}
.navbar.height .nav.navbar-nav {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item a {
min-height: 50px;
}