Fixed position element got conflict with bootstrap 3 navbar-Twitter bootstrap

.j-media-icons {
  width: 40px;
  position: fixed;
  top: 30%;
  z-index: 10;
  /* 	z-index: 999999; */
}

.j-media-icons ul {
  margin: 0;
  padding: 0;
}

.j-media-icons ul li {
  list-style: none;
  margin-top: 2px;
  margin-bottom: 2px;
  text-align: center;
  padding: 10px 0;
  opacity: 0.6;
}

.j-media-icons ul li:hover {
  opacity: 1;
}

.j-media-icons ul li a {
  text-align: center;
  text-decoration: none;
  padding: 10px 12px;
}

.j-media-icons ul li.facebook {
  background: #3b5998;
}

.j-media-icons ul li.facebook a {
  color: #ffffff;
  padding: 10px 15px;
}

.j-media-icons ul li.twitter {
  background: #1da1f2;
}

.j-media-icons ul li.twitter a {
  color: #ffffff;
}

.j-media-icons ul li.instagram {
  background: #f09433;
}

.j-media-icons ul li.instagram a {
  color: #ffffff;
}

.j-media-icons ul li.vimeo {
  background: #1da1f2;
}

.j-media-icons ul li.vimeo a {
  color: #ffffff;
}

.navbar-default {
  z-index: 11;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="navbar navbar-default" style="border-radius: 0;">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#acme-navbar" aria-expanded="false" aria-controls="navbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
      <a href="#" class="navbar-brand" title="Acme">
				Acme
			</a>
    </div>

    <div id="acme-navbar" class="navbar-collapse collapse acme-navbar-menu">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#" class="dropdown-toggle">ABOUT</a>
        </li>
        <li>
          <a href="#" class="dropdown-toggle">SERVICES</a>
        </li>
        <li>
          <a href="#" class="dropdown-toggle">PRODUCTS</a>
        </li>
        <li>
          <a href="#" class="dropdown-toggle">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<div class="j-media-icons">
  <ul>
    <li class="facebook">
      <a target="_blank" href="#" title="Facebook" data-toggle="tooltip">
				F
			</a>
    </li>
    <li class="twitter">
      <a target="_blank" href="#" title="Twitter" data-toggle="tooltip">
				T
			</a>
    </li>
    <li class="instagram">
      <a target="_blank" href="#" title="Instagram" data-toggle="tooltip">
				I
			</a>
    </li>
  </ul>
</div>


<div class="container">
  <p class="text-justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida tempus dolor pharetra congue. Nam mollis augue eget viverra posuere. In tempus, orci ac vestibulum pharetra, lacus dui ullamcorper diam, eu hendrerit quam nisi ac purus. Morbi vitae
    accumsan lorem. Morbi bibendum massa dui, ac consectetur orci ultricies sit amet. Morbi placerat ac lacus nec sodales. Nulla rutrum nisi odio, et cursus nulla accumsan eu. Sed varius non justo sit amet gravida. Ut eros leo, elementum vitae nibh ut,
    aliquam scelerisque neque. Donec semper sapien nisi, et commodo justo semper pellentesque. Etiam vehicula pulvinar risus et feugiat. Etiam ut justo rutrum, ultrices nibh ac, tempus justo. Proin non aliquam libero. Etiam venenatis eros eget sagittis
    laoreet. Fusce vel euismod elit. Nunc auctor felis non commodo elementum. Ut ullamcorper, dui nec tincidunt laoreet, quam quam consequat tellus, vitae finibus urna eros eu dolor. Vivamus at finibus urna. Quisque vulputate dapibus nisi nec convallis.
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu libero viverra, pellentesque tellus nec, lacinia ante. Vestibulum interdum lacus et felis hendrerit, eu mollis augue aliquet. Sed sed ultricies dui. Nullam rhoncus mi dui, in efficitur
    nunc blandit eu. Nulla dui enim, ullamcorper a varius vel, semper nec orci. Proin quis lacinia metus. Quisque suscipit semper tempus. Etiam aliquet iaculis urna vitae feugiat. Nullam ut risus nisl. Sed ligula leo, egestas id justo a, ultricies pulvinar
    ligula. Morbi eu est mi. Nullam mattis, ligula quis dapibus auctor, urna diam feugiat lectus, eu ultrices urna tellus dictum leo. Vestibulum ut pharetra tellus. Duis rhoncus ornare dapibus. Vestibulum eu elit suscipit diam condimentum ultricies id
    ac orci. Vivamus quis dictum orci. Etiam ultricies auctor nulla, maximus rutrum enim mollis non. Ut sodales varius dui, et laoreet quam iaculis ac. Donec eu enim et sem finibus aliquam vel at sem. Curabitur a dolor varius, pretium lacus a, malesuada
    lacus. Etiam elit felis, molestie ac ultrices eu, auctor sed dui. Donec ex justo, interdum id augue ac, viverra lobortis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus placerat lorem nec
    tellus facilisis viverra. Vivamus scelerisque iaculis dignissim. Nam in hendrerit ex. Sed iaculis accumsan tellus, a scelerisque diam cursus a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pulvinar,
    magna in tempus feugiat, ligula velit tempus lorem, ut facilisis urna velit a sapien. Aenean odio urna, sollicitudin id neque in, lobortis elementum nunc. Nullam sed tincidunt enim, at feugiat arcu. Orci varius natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Duis dictum lectus sapien, non tristique urna tincidunt at. Nulla efficitur tincidunt tellus in lobortis. Donec et vehicula ligula. Proin vestibulum tempor lectus ac lacinia. Duis eu dapibus risus, viverra tempor ipsum.
    Proin accumsan a velit ac ultrices. Mauris in iaculis turpis. Praesent porttitor lobortis arcu, a iaculis tellus.
  </p>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>