Уменьшение размера веб-страницы скрывает некоторый контент

Question

Я занимаюсь разработкой веб-приложения, используя MEAN Stack с Angular 6. Вот мой HTML.

<div class="header-container" 
     [class.left]="position === 'normal'"
     [class.right]="position === 'inverse'">
    <div class="logo-containter">
        <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
        <div class="logo" (click)="goToHome()">XXX</div>
    </div>
</div>

<div class="header-container">
    <!--<ngx-layout-direction-switcher></ngx-layout-direction-switcher>-->
    <nb-actions
        size="medium"
        [class.right]="position === 'normal'"
        [class.left]="position === 'inverse'">
        <nb-action *nbIsGranted="['view', 'currentUser']" >
            <nb-user [nbContextMenu]="userMenu" [name]="currentUser?.firstName" [picture]="currentUser?.imageUrl"></nb-user>
        </nb-action>
        <nb-action class = "control-item" [nbContextMenu]="settingsMenu" icon="nb-gear"   (itemClick)= "onContecxtItemSelection(title)"></nb-action>
        <nb-action class="control-item" icon="nb-drop"></nb-action>
        <nb-action class="control-item"  >
            <span (click)="SetCountZero()"  [nbContextMenu]="NotificationMenu"  nbContextMenuTag="NotificationContextMenu">
        <i class="control-icon nb-notifications" ><div  *ngIf="messageCount > 0" class="badge">{{messageCount}}</div></i>
        </span>
    </nb-action>
    </nb-actions>
</div>

Вот стиль для контейнера заголовка.

 .header-container {
    display: flex;
    align-items: center;
    width: auto;

    .navigation {
      @include nb-ltr(padding-right, nb-theme(padding));
      @include nb-rtl(padding-left, nb-theme(padding));
      font-size: 2.5rem;
      text-decoration: none;

      i {
        display: block;
      }

    }

    .logo {
      padding: 0 nb-theme(padding);
      font-size: 1.75rem;
      font-weight: nb-theme(font-weight-bolder);
      @include nb-ltr(border-left, 1px solid nb-theme(separator));
      @include nb-rtl(border-right, 1px solid nb-theme(separator));
      white-space: nowrap;

      span {
        font-weight: nb-theme(font-weight-normal);
      }
    }
  }

Мой вопроскогда я уменьшаю размер значка шестеренки веб-страницы, значок удаления и значок уведомления исчезают.Я попытался использовать 'overflow: hidden' в контейнере заголовка.Но не сработало.