Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid">
- <div class="row">
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
- <div class="navbar-header">
- <a class="navbar-brand" href="index.html" style="font-size: 2.5em;">FINKI</h3></a>
- </div>
- <ul class="nav navbar-right top-nav">
- <li><a href="#">John Smith</a></li>
- <li><a type="button" class="btn btn-default navbar-btn" href="/logout">
- Logout <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a>
- </li>
- </ul>
- <div class="collapse navbar-collapse navbar-ex1-collapse">
- <ul class="nav navbar-nav side-nav">
- <li class="active">
- <a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
- </li>
- <li>
- <a href="reports.html"><span class="glyphicon glyphicon-stats"></span> Reports</a>
- </li>
- <li>
- <a href="tables.html"><span class="glyphicon glyphicon-th-large"></span> Tables</a>
- </li>
- </ul>
- </div>
- </nav>
- </div>
- </div>
- ---------------------------------------
- body{
- padding-top: 80px;
- }
- .top-nav {
- padding: 0 50px;
- }
- ul.top-nav > li {
- display: inline-block;
- }
- ul.top-nav > li > a {
- padding-top: 15px;
- padding-bottom: 15px;
- line-height: 20px;
- color: #999;
- }
- .top-nav>li>a:hover,
- .top-nav>li>a:focus {
- color: #fff;
- background-color: #000;
- }
- nav.navbar > div.navbar-header{
- padding-top: 10px;
- padding-left: 15px;
- }
- /* side bar */
- @media(min-width:768px) {
- .side-nav {
- position: fixed;
- top: 67px;
- left: 225px;
- width: 225px;
- margin-left: -225px;
- border: none;
- border-radius: 0;
- overflow-y: auto;
- background-color: #222;
- bottom: 0;
- overflow-x: hidden;
- padding-bottom: 40px;
- }
- .side-nav>li>a {
- width: 225px;
- }
- .side-nav li a:hover,
- .side-nav li a:focus {
- outline: none;
- background-color: #000 !important;
- }
- }
- .side-nav>li>ul {
- padding: 0;
- }
- .side-nav>li>ul>li>a {
- display: block;
- padding: 10px 15px 10px 38px;
- text-decoration: none;
- color: #999;
- }
- .side-nav>li>ul>li>a:hover {
- color: #fff;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement