Css Ajuda com Menu com logo

image

galera, como faço para deixar o meu menu igual a da imagem? preciso que o menu fique centralizado com o logo no meio.

segue código…

 .navbar {
    background: #001c7d;
    margin-bottom:0;
    min-height:70px;
}
 .nav img{
      padding:10px;
      border-radius: 50%;
	  
      margin-bottom:-20px;
	  height:140px;

    }
	.navbar {
    background: #001c7d;
    margin-bottom:0;
    min-height:70px;
}

.navbar-fixed-top {
    min-height:60px;
    height:60px;
    padding-top:0;
}
.navbar-inner {
    background: #001c7d;
    border-radius:0;
    filter: none;
    border: none;
    box-shadow: none;
}
.navbar .brand img {
    width:120px;
    height:40px;
}
.navbar .nav > li > a {
    text-transform:uppercase;
    line-height: auto;
    vertical-align: middle;
    margin:10px 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: none;
    box-shadow: none;
    font-size:15px;
    text-shadow: none;
    color: #fff;
    transition: border-color 1s ease;
}
.navbar .nav > li:hover> a, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    border: none;
    color: #fff;
	font-weight:bold;
    background-color: #001c7d;
    transition: border-color 1s ease;
	
}
.nav-pills {
    margin-bottom: 30px;
}
.nav-pills > li > a {
    background: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-right:5px;
    padding-left:25px;
    padding-right:25px;
    border: 1px solid #181A1C;
}
.nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
    background: #181A1C;
    color: #fff;
}
.navbar .btn-navbar:hover, .navbar .btn-navbar {
    border-radius:0;
    background:#FECE1A;
    color: #000;
}

        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                   <!-- <a href="#" class="brand">
                        <img src="images/logo.png" width="120" height="40" alt="Logo" />
             
                    </a>-->
                   
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <i class="icon-menu"></i>
                    </button>
             
                    <div class="nav-collapse collapse pull-right">
                        <ul class="nav" id="top-navigation">
                            <li class="active"><a href="#home">Home</a></li>
                            <li><a href="#portfolio" class="btnCor">Serviços</a></li>
                            <li><a href="#about" class="btnCor">Produtos</a></li>
						<td class="menu-logo"><img src="images/logo_inteltek_redonda.png" ></td>
                            <li style="display:none"><a href="#clients" class="btnCor">Clientes</a></li>
							<li><a href="#service" class="btnCor" >Empresa</a></li>
                            <li><a href="#contact" class="btnCor">Contato</a></li>
                        </ul>
                    </div>
                   
                </div>
            </div>
        </div>

POXA
tem como você me ajuda no CSS também??? Eu estou estudando por um apostila e tal, nela eles vão com você fazneod um projeto de um loja de roupa. Até ai tudo bem. mas agora vamos usar o atributo class no HTML e o ponto no CSS

Agora coloco certinho e não consigo mexer no CSS desta forma… a Logo que era pra aparecer não aparece!

Era pra ta assim:
assimjejkfdjfkj

e ta assim como na segunda foto

assimjejkfdjfkj

E TA ASSIM

me desculpa, acabei pondo o código errado. o arquivo é muito grande então coloquei no google drive
https://drive.google.com/drive/folders/1RLGfA4vwTjC-_45E2HH8tVBBH1rkmRDQ?usp=sharing