Wyśrodkowany navbar z logo po środku

Witajcie. Chciałbym zrobić wyśrodkowany navbar z logo po środku. Coś podobnego jak na tej stronie: http://www.quazarwebdesign.com/ Jak to zrobić? Znalazłem jakiś przykład na internecie i trochę go zmodyfikowałem, ale nie działa jak powinien tzn. responsywność i nie wyśrodkowuje go. Poniżej podaję kod oraz w załączniku cały projekt.

HTML:

<div class="container-fluid">
            <nav class="navbar navbar-default menu" role="navigation">
              <div class="">
                   <div class="row">
                  <div class="col-md-12 col-sm-12 text-center">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                <!-- Collect the nav links, forms, and other content for toggling -->

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                  <ul class="nav navbar-nav ">
                        <li><a href="#"><span class="glyphicon glyphicon-search" style="font-size: 40px;" aria-hidden="true"></span><br>Strona<br>główna</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-search" style="font-size: 40px;" aria-hidden="true"></span><br>O mnie</a></li>
                      
                        <li class="hidden-xs"><a class="navbar-brand img-responsive" href="#"><div style="width: 200px; height: 250px; background-color: green;"></div></a></li>

                        <li><a href="#"><span class="glyphicon glyphicon-search" style="font-size: 40px;" aria-hidden="true"></span><br>Portfolio</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-search" style="font-size: 40px;" aria-hidden="true"></span><br>Kontakt</a></li>

                  </ul><div class="clearfix"></div>
                </div><!-- /.navbar-collapse -->
                </div>
                </div><!-- row -->
              </div><!-- /.container-fluid -->
            </nav>
        </div>

CSS:

.navbar {
    position: absolute;
    border: none;
    box-shadow: none;
    background: #16a085;
}

@media screen and (max-width: 767px) {
    .navbar {
        z-index: 999;
        background-color: gray;
    }
    .glyphicon {
        display: none;
    }
}

button.navbar-toggle{
position: absolute;
right: 5px;
top: 0;
}

.navbar-header{
float: none;
display: inline-block;
}

.navbar-collapse{
    padding-right: 0px;
    padding-left:0px;
}

.nav>li>a {
    padding: 10px 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.collapse.in{
display: inline;
}