body { padding-top: 60px; } @@media (max-width: 979px) { body { padding-top: 0px; } } @@media (min-width: 767px) { .affix, .affix-top { position: fixed; width: 180px; } } .glyphicon { margin-right: 10px; } .panel-body { padding: 0px; } .panel-body table tr { padding: 0px 0px 0px 0px; } .panel-body table tr td { /*padding-left: 15px;*/ padding: 0px 0px 0px 0px; } .panel-body .table { margin-bottom: 0px; } .panel-group.affix { background-color:green; } .panel { padding: 0px 0px 0px 0px; } .panel-heading { padding: 10px 0px 10px 0px; font-style: oblique; background-color: turquoise; } .panel > .panel-heading > .panel-title > a { text-decoration: none; } .panel-title { background-color: gray; } .panel-body { background-color:orange; } .collapse.navbar-collapse { padding: 0px 0px 0px 0px; background-color:blue; } .pdsa-panel-toggle { float: right; cursor: pointer; } .panel, .panel-group .panel-heading+.panel-collapse>.panel-body{ border: none; } /* For button glyph */ /* Icon when the collapsible content is shown */ /*.btn:after { font-family: "Glyphicons Halflings"; content: "\e114"; float: right; margin-left: 15px; }*/ /* Icon when the collapsible content is hidden */ /*.btn.collapsed:after { content: "\e080"; }*/ /* #accordion.affix-top { position: static; margin-top:30px; width:228px; } #accordion.affix { position: fixed; top:70px; width:228px; } */ /* .container { min-height:100%; width:100%; position:relative; background-color:Black; display:inline-block; } */ /* .row { width:20%; top:0px; left:0px; bottom:0px; position:absolute; background-color:Aqua; } */ </style> </head> <body> <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sideNavBar"> </button> <a class="navbar-brand" href="#">SBConsignment</a> </div> <ul class="nav navbar-nav pull-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> robert.gagnon@doodle.com </a> <ul class="dropdown-menu"> <li><a href="#">Logout</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Change Password</a></li> </ul> </li> <li><a href="#"> Sign Up</a></li> <li style="padding-removed1em"><a href="#"> Login</a></li> </ul> </nav> <div class="col-sm-2 col-md-2"> <div class="collapse navbar-collapse" id="sideNavBar"> <div class="panel-group affix" id="accordion"> @*<button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Content</button>*@ @*<div class="panel panel-default" style="background-color:orange;">*@ <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Content </a> <a class="pdsa-panel-toggle"></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="http://www.jquery2dotnet.com">Articles</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">News</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Newsletters</a> </td> </tr> <tr> <td> <a href="http://www.jquery2dotnet.com">Comments</a> 42 </td> </tr> </table> </div> </div> </div> <div class="panel"> ... What I have tried: I have tried all the styling I can think of and have run out of ideas.</div></div></div></div></div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)