noob-fella noob-fella - 23 days ago 7
CSS Question

boostrap sidebar collapse menu :after

Hi guys I did a collapse menu with boostrap, works fine, but I cannot make the who li the same color as the button:

.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}

.collapse-link a.collapsed:after {
content: "\e080";
background-color: white;
}


I would like the
class="collapse-link"
get the same background color as right now in the buttons in the right, so the full div will be following the buttons color when is collapse and when is not, right now just the buttons getting background color i would like the titles: test3 and test get the background color of the buttons beside.

jsfiddle: http://jsfiddle.net/Wc4xt/4377/

HTML:

<div class="sidebar">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample1">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="#">test List</a>
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="#">Create</a>
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="">link List</a>
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
<a href="">test</a>
</div>
</li>
</ul>
</div>
</div>


CSS:

.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #2f3f4d;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.sidebar-nav li {
text-indent: 22px;
line-height: 60px;
border-bottom: 1px solid #455b6f;
}

.sidebar-nav li a {
display: block;
height: 65px;
}

.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}

.collapse-link a.collapsed:after {
content: "\e080";
background-color: white;
}

Answer

Add following css to make it work:

.collapse-link a.collapsed {  
  color: white;
}

a {
  text-decoration:none;
}

ul li {
  list-style:none;
}

Also check: http://jsfiddle.net/mayankN/Wc4xt/4381/