html - How to display vertical nav-bar with some headers values? -


on smaller window nav-bar default displaying menu items

enter image description here

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

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer ...
Read more

c# - Asp.net web api : redirect unauthorized requst to forbidden page -

im trying redirect unauthorized request forbidden page instead i'm getting forbidden page in response body , how can fix ? here's startup class : app.createperowincontext(storecontext.create); app.createperowincontext<applicationusermanager>(applicationusermanager.create); app.createperowincontext<applicationsigninmanager>(applicationsigninmanager.create); app.usecookieauthentication(new cookieauthenticationoptions { authenticationtype = defaultauthenticationtypes.applicationcookie, expiretimespan = timespan.fromdays(30), }); app.useexternalsignincookie(defaultauthenticationtypes.externalcookie); app.usetwofactorsignincookie(defaultauthenticationtypes.twofactorcookie, timespan.fromminutes(5)); app.usetwofactorrememberbrowsercookie(defaultauthenticationtypes.twofactorrememberbrowsercookie); the method im trying reach : [httpget] [authorize(roles = "admin")] public string getcurrentusername() { return userman...
Read more