Fixate div to tabs when changing window size/screen size


#1

Problem is that the speech bubbles are only fixated to the tabs for a certain width of the browser:
enter image description here

See here to try out yourself.

Relevant code is

<ion-tabs class="tabs-icon-top tabs-positive">
  <div class="bubble-bar-tabs">
    <div class="b-home"></div>
    <div class="b-about"></div>
    <div class="b-cont"></div>
  </div>
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab>...
  <ion-tab>...
</ion-tabs>

with

.bubble-bar-tabs {
    position: absolute;
}

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 3rem;
    top: -75px;
    width: 219px;
    height: 70px;
}

How to fix the alignment of the speech bubbles to the tabs for all browser windows sizes/screen sizes? Thank you.