Bootstrap 3 navbar flicker when open and vanish

Question

I have this navbar in bootstrap and when i click my hamburger icon it just flickers and open menu then vanish... I cannot understand why really. Feels like i being blind staring at code..

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="RAQT">
        <img class="img-responsive" style="max-width:100px; margin-top: -7px;" src="http://www.zappbug.com/wp-content/uploads/2013/02/twitter-logo-small.png">
    </a>
 <a class="navbar-brand navbar-justified" href="#">Stockholm</a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navDefault"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button>
    </div>
    <div id="navDefault" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#" class="">Bubbles</a>
            </li>
            <li><a href="#about" class="">About</a>
            </li>
            <li><a href="#contact" class="">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Below CSS

body {
padding-top:0px;
}

    .navbar-brand
    {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        margin: auto;
    }
    .navbar-header {
      float: none;
    }
    .navbar-toggle {
      display: block;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
    }
    .navbar-nav>li {
      float: none;
    }
    .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }

Example here http://www.bootply.com/QKMDlXRfP6

Answer 1

After some research I found the answers I need to make it work with the latest Bootstrap 3.3.4

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="RAQT">
        <img class="img-responsive logo">
    </a>
      <a class="navbar-brand navbar-center" href="https://www.raqt.com">www.raqt.com</a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navDefault"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button>
    </div>
    <div id="navDefault" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#" class="">Bubbles</a>
            </li>
            <li><a href="#about" class="">About</a>
            </li>
            <li><a href="#contact" class="">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

body {
    padding-top:0px;
}

.logo{
  width: 100px;
    height: 24px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABKCAYAAABNRPESAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABZhJREFUeNrsXf912jAQFnn8X3eC0glCJ4iZIGSCmAlKJwhMQJkAMgF0AtwJ4kwAnaDuBFSXnFuXyvhOPtniRfeeHq9UtqT7dN/9sEyUCiIqx+NxdqyXXdX1/aDAY6Q/hrrB50C3TLe81+tlXcyn/0ZBAMV/1m2MIJj6HPTHVrelBufgNSClXRXjVwdsmZ58bnkvVbqfOrmv0vdNhazhQbcpofsA+031dXM9/qwNQHrAeYR+a9glum9c2llVkuq+oxqlwPW3CEDEmC+AA8A8cgHS4wLoqxL4XAEKG5k2HOql2Ew3ho1lWsejSc/qSJOxbhti310VEOjwfh5lZI+KIFmG0Lh7pDsbR06R+Iq4O1Y1VlGnEFDcHukiErJuUMxO33tB6LsTGhfG3KCVOxEqIFEDMBJBhZgEOH51LgxtQFMmgXttugbEFowxWpdrSXAsk7/67GC8WN97elGAoDLaAOMPrRqoJHFomQ8uqMulhSwcKqOKVk+txNY6UmxZzXgL6UX0HVpHYqEEUMCv0neUEPIUgHUpzB1YhLZ35UQQA5JFhR8Cqpz7Akh64uiiE6qgylfd5lUJJYI7xQit1uFCf7xXzFzPwZRnQL6j7znCwGRYsQmWJX3cE9YPwH8xfs+MkyGWn5q4E+JziKgwJqfmLFOG1VFj/Rj7r5hrSwi5zN6kE8niIgeQJ6QBivIoSdgTlwY5IMOiORuNmk/VgdkUEKpTz9GcqRVQijN/ZNV4XqkkY4zNyT22xDlUOfrbtqOsCbVoSC1nEJVr2hhKcFMU8oPRd2n4biwVAvcdKOKlCMcFBGtEA1Tk8EzpwoVkTGtaVWTwaVuAcKklJYTFwMc36t8yfleSc9an550a5hx7CQihlHKvGhQqPZHvBkA+eJsYVgCxcEg5bUvmik5dFxcjrMRuPAeDS5m5K0D6LsE4k91etGD2fnEWsukYDI6DvfYF7CtH1jG9pMhJauNI5CJXDsAoTnZwlQfx/RxzGGgfeyfC3PXPjL4DocSuMbAufMiYkSUf1Guld91xslfMe92xVTuhLGpdByzikyMwbAC5F6Cm3EdAhkTLmHAP1TEjoQOOQw59TUd8OGGyxPFTF4BQFrV1CYZlpAWyEmYBvxLDM/LL8jqu4/3GTRDrHpqhFSUVVn+xgLyziN7Yx0C1FW4teH1RdbwWfcfmDA03pvWuAEkYTx+H+HQxsRxra3HNAz5xTAq/gvW4c5WH7xxLrwoMXACSEqmnWLDp+XxUnCfW/3xqGN/bngqJ0ae8PEcnVB64/mpaWm+M650pzsEBapZuccj4CXfkruIgAUdmJro7upX9iXKtxYWF2FBE8ZAqVm6qwnPHFPwodSNxQDD+d60An+YEQcPX0lipV4DgpGbK7hCDS1BmSuARq0GWhpxq6xUgKCPfQNFyJzynrOJVt6V3gOCuGQnvylxoThKgVJ6uQdqa+2YhLwrA9w0nDTJZUOJat48SiiyBsm4Y2o/OlX/QcibcTcR66bOpMjC5uiVEUxm2b5htF9cnhCgspTrWmpPt53QxYay5eE3iRv1/7uyADUB7fpl7l4SO2Xp0wsl5B/OISxtlKAlIEAErljwk7pUPuVCpo+ZhUFH7ViJWSgoWIpRfdGUlARA72voQAGlXnoOFXBZlBR/iGSCK+sQzACIgxKpEAKRlSWv+/zoA8gYSxABItdS9mRsHQPyiLCeOPQBiT1lOaCsA0izSug6A+EVbwUI8o604AOJXpCXu2AMgDSMtadoKgDSPtK4DIH5FWuGRbptC+WW6YCGe0ZakYw+ACERaSvAVigCIZ5FWAEQm0roNamrXsTf+3V9yZBfUXQsGnD2m/K4vnPR/HyjLvVAddsT4aY4gjinrp+nvl9hIP6ibJJ/U648GgIPP8fOH+vt+x0HqT+v9FmAA7gRc8Hw3ruUAAAAASUVORK5CYII=')
  }
.navbar-center
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
  height:100%;
}

    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }

Bootply example