I already read the related questions, which unfortunately do not give an answer to my specific problem:

On the basis of Bootstrap 3.0.3, I am trying to create a fixed navbar on the left with a width of 50px, which should expand to a width of 150px, when you click on the navbar-toogle. When the navbar is not expanded, it should display only the glyphicons for each link. I am able to create the navbar with a fixed width, but I am stuck with the correct incorporation of the navbar-toggle and the the span-text, which is neither displaying nor working correctly. Have a look at the example pictures for the intended result:

HTML:

<!-- Sidebar -->

<div id=sidebar role=navigation>

    <button type=button class=navbar-toggle data-toggle=collapse data-target=.navbar-collapse>

        <span class=sr-only>Toggle navigation</span>

        <span class=icon-bar></span>

        <span class=icon-bar></span>

        <span class=icon-bar></span>

      </button>





    <div id=sidebar-nav>

                <ul class=nav nav-stacked>



                    <li><a href=http://stackoverflow.com/> <span class=glyphicon glyphicon-star></span>Link1</a></li>

                    <li><a href=http://stackoverflow.com/> <span class=glyphicon glyphicon-cloud></span>Link2</a></li>

                    <li><a href=http://stackoverflow.com/> <span class=glyphicon glyphicon-fire></span>Link3</a></li>

                    <li><a href=http://stackoverflow.com/> <span class=glyphicon glyphicon-heart></span>Link4</a></li>

                    <li><a href=http://stackoverflow.com/> <span class=glyphicon glyphicon-send></span>Link5</a></li>



                </ul>

    </div>

<!-- Sidebar End -->

</div>

CSS:

    #sidebar {

    background-color: #16a085;

    color: white;

    height: 100%;

    padding: 0;

    position: fixed;

    left: 0;

    top: 0;

    width: 50px;

    z-index: 2;



}



#sidebar-nav {

    margin-top: 75px;

}

I would appreciate your advice on this.