html - How to display vertical nav-bar with some headers values? -
on smaller window nav-bar default displaying menu items
it should not display menu item when user enters site
and issue facing on first time when click on nav-bar button menu items not hide after click on second menu-item hide.
.sidebar .sidebar-nav.navbar-collapse { padding-left: 0; padding-right: 0; } .sidebar .sidebar-search { padding: 15px; } .sidebar ul li { border-bottom: 1px solid #e7e7e7; } .sidebar ul li a.active { background-color: #eeeeee; } .sidebar .arrow { float: right; } .sidebar .fa.arrow:before { content: "\f104"; } .sidebar .active>a>.fa.arrow:before { content: "\f107"; } .sidebar .nav-second-level li, .sidebar .nav-third-level li { border-bottom: none !important; } .sidebar .nav-second-level li { padding-left: 37px; } .sidebar .nav-third-level li { padding-left: 52px; } @media ( min-width: 768px) { .sidebar { z-index: 1; position: absolute; width: 250px; margin-top: 51px; } .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts { margin-left: auto; } }<!doctype html> <html lang="en"> <head> <title>bootstrap example</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.2.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-default" role="navigation"> <div class="navbar-header" style="padding: 0px; margin: 0px"> <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> <a class="navbar-brand" href="index.html">headers</a> </div> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggledemo7" data-parent="#sidenav01" class="collapsed"> profile <span class="caret pull-right"></span> </a> <div class="collapse" id="toggledemo7" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">my profile</a></li> <li><a [routerlink]="['/login']">logout</a></li> </ul> </div> </li> <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggledemo3" data-parent="#sidenav01" class="collapsed"> others <span class="caret pull-right"></span> </a> <div class="collapse" id="toggledemo3" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">holydays calendar</a></li> <li><a href="#">suggestions & feedback</a></li> <li><a href="#">bulletin board</a></li> <li><a href="#">contact us</a></li> </ul> </div> </li> </ul> </div> </div> <!-- /.navbar-collapse --> </nav> </body> </html>it might small mistake, have worked hard resolve this, not web designer need done.
can me on hide menu items of nav bar when user first time opens site , nav-bar buttton not functioning on first time when clicks on it.
.sidebar .sidebar-nav.navbar-collapse { padding-left: 0; padding-right: 0; } .sidebar .sidebar-search { padding: 15px; } .sidebar ul li { border-bottom: 1px solid #e7e7e7; } .sidebar ul li a.active { background-color: #eeeeee; } .sidebar .arrow { float: right; } .sidebar .fa.arrow:before { content: "\f104"; } .sidebar .active>a>.fa.arrow:before { content: "\f107"; } .sidebar .nav-second-level li, .sidebar .nav-third-level li { border-bottom: none !important; } .sidebar .nav-second-level li { padding-left: 37px; } .sidebar .nav-third-level li { padding-left: 52px; } @media ( min-width: 768px) { .sidebar { z-index: 1; position: absolute; width: 250px; margin-top: 51px; } .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts { margin-left: auto; } }<!doctype html> <html lang="en"> <head> <title>bootstrap example</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.2.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-default" role="navigation"> <div class="navbar-header" style="padding: 0px; margin: 0px"> <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> <a class="navbar-brand" href="index.html">headers</a> </div> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse collapse"> <ul class="nav" id="side-menu"> <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggledemo7" data-parent="#sidenav01" class="collapsed"> profile <span class="caret pull-right"></span> </a> <div class="collapse" id="toggledemo7" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">my profile</a></li> <li><a [routerlink]="['/login']">logout</a></li> </ul> </div> </li> <li class="menu-bar-list-item"><a target="_self" data-toggle="collapse" data-target="#toggledemo3" data-parent="#sidenav01" class="collapsed"> others <span class="caret pull-right"></span> </a> <div class="collapse" id="toggledemo3" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">holydays calendar</a></li> <li><a href="#">suggestions & feedback</a></li> <li><a href="#">bulletin board</a></li> <li><a href="#">contact us</a></li> </ul> </div> </li> </ul> </div> </div> <!-- /.navbar-collapse --> </nav> </body> </html>please see updated code , resolved via adding collapse class in below mentioned div
<div class="sidebar-nav navbar-collapse collapse">
Comments
Post a Comment