Текст панели навигации перетекает, когда боковая панель сворачивается в значки

Question

У меня есть боковая панель, которая содержит значки и название меню.Как только размер экрана уменьшится на x, боковая панель сворачивается, показывая только значок и скрывая название меню.Панель навигации выглядит следующим образом:

<nav id="sidebar" [ngClass]="{active: barActive}">
        <div id="toogleIcon" (click)="onDismiss()">
            <img id="closeIcon" *ngIf="barActive" class="" src="../assets/img/icons/1.svg">
            <span id="menuIcon">
                <img *ngIf="!barActive" class="" src="../assets/img/icons/2.svg">
            </span>
        </div>

        <ul class="list-unstyled components">
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/clients">
                    <img class="navItemsSvg" src="../assets/img/icons/A.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">A</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/users">
                    <img class="navItemsSvg" src="../assets/img/icons/B.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">B</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/houses">
                    <img class="navItemsSvg" src="../assets/img/icons/C.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">C</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/devices">
                    <img class="navItemsSvg" src="../assets/img/icons/D.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">D</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/administration">
                    <img class="navItemsSvg" src="../assets/img/icons/F.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">F</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="barPlaceholder"></div>

Вы можете увидеть это здесь:

http://jsfiddle.net/36mjqc5v/

Проблема, с которой я сталкиваюсь, заключается в том, что когда боковая панель сворачивает название менюпродолжает отображаться разлив из боковой панели.

Кажется, это проблема со свойствами CSS.Но я не уверен, что является причиной этого.

Answer 1

Добавив медиа-запрос в css, это можно сделать

 @media(max-width:600px) /*specific width*/
    { .navTextItem{display:none;}}