Html 导航栏和移动菜单内带有品牌文字的徽标

我有两个问题

第一：如何将徽标+品牌文字放入导航栏中？我想把它放在导航的左端和内联

第二：我希望它出现在我的移动菜单的中心

我试着把它放在li tag，但有人告诉我它不应该在那里。所以，我有点不知所措，我将把它放在哪里，我将使用什么标签，我将如何将它插入导航。我已经想了差不多两个星期了，但我只是破坏了一些元素

HTML:

我的徽标+品牌文字：

<div class='rbanner'>
    <a href='/'><img class='sr' align="left" border="0" height="70" src="mylogo.png" />
    <span class="sr1">Test</span><span class="sr2">Page</span></a>
</div>

预览示例：

---

谢谢

你能提供一张图片说明它最终的样子吗？谢谢你的回复。。。这是我的预览样本。。。是盒装设计还是全宽设计？因为您的

标签包裹

和

搜索包裹

是全宽的，中堂部分是全宽的boxed@Jayant... 对不起，伙计，我不太熟悉盒装设计。。。我对编码有点陌生，愿意学习。。我只是希望它能像其他li标签一样响应。。。所以我想全宽可能。。

#fixed{
    position:fixed;
    z-index:1000;
    width:100%; 
    top:0;
}
.wrap-top{
    height:70px;
    width:100%; 
    line-height:70px;
}

.wrap-top ul{
    position:relative; 
    width:100%;
    height:100%;
}

.wrap-top ul li{
    float:left;
    list-style:none;
    text-align:center;
    text-transform:uppercase;
    font-size:21px; 

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height:100%;
}
.width{
    max-width:800px;
    width:100%;
    margin: 0 auto;
    height:100%;
}

#search-wrap{background:#253444;}

.search-wrap{margin-top:-70px;}
.search-wrap.active{margin-top:0;}

#search-wrap ul li{
    width:75%;
    color:#3b5167;
    height:70px;        
    border-right: 1px solid #3b5167 ;
}

#search-wrap ul li:first-child{
    border-left: 1px solid #3b5167 ; 
    position:relative; 
}

#search-wrap ul li:first-child i{
    position:absolute;
    top:23px;
    left:3.5%;
    color:#3b5167;  
}
#search-wrap #li-3{width:15%; cursor:pointer; font-size:18px; color:#97a5b5;}
#search-wrap #li-4{ width:10%; cursor:pointer;}
#search-wrap #li-3:hover, #search-wrap #li-4:hover{ background:#2c3e50; color:#fff;}

#search-wrap input{
    text-align:left;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    padding:4% 4% 4% 10%;   
    background:none;
    color:#fff;
    font-size:36px;
     font-family: 'Anton', sans-serif;
}

#search-wrap input:focus{   background:#2c3e50;}

input[type='search']::-webkit-search-decoration, 
input[type='search']::-webkit-search-cancel-button, 
input[type='search']::-webkit-search-results-button, 
input[type='search']::-webkit-search-results-decoration {
    display: none;
}

#search-wrap input::-webkit-input-placeholder{ color:#3b5167; opacity:1;}
#search-wrap input:-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input::-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input:-ms-input-placeholder {color:#3b5167; opacity:1;}


.menu-mob{display:none !important;}
#nav-wrap{  background:#fff; line-height:64px;}

.nav-wrap.active, .nav-wrap.active li{  height:50px;    line-height:50px;}
.nav-wrap.active ul li#search-btn{  line-height:50px !important;}
.nav-wrap.active ul li:before{display:none;}
.nav-wrap.active ul li span{display:none;}

#nav-wrap ul li{
    width:15%;
    cursor:pointer;
    color:#3b5167;  
    border-right: 1px solid #cad0d6 ;
    position:relative;
}

#nav-wrap ul li:first-child{border-left: 1px solid #cad0d6 ;}

#nav-wrap ul li#search-btn{
    width:10%; 
    line-height:70px;
}

#nav-wrap ul li:hover, 
#nav-wrap ul li.active {    
    color:#FFF; 
    background:#2c3e50;
}

.nav-wrap ul li span{
    display:block;
    line-height:0;
    font-size:9px;
    position:relative;
    top:-12px;  
    color:#415C76;
    font-family:Arial, sans serif;
}

.tags-wrap{
    height:0px;
    background:#3b5167; 
    overflow:hidden;
}

.tags-wrap.active{
    height:50px;    
}

.tags-wrap ul li{
    font-size:12px;
    color:#707f91;
    background:#2c3e50;
    line-height:20px;
    height:auto;
    padding:2px 0;
    width:8%;
    margin:0 1%;
    font-family:Arial, sans serif;
    text-transform:lowercase;
    cursor:pointer;
    font-weight:bold;
    opacity:0.8;
}

.tags-wrap ul li:hover{
opacity:1;  
color:#97a5b5;
}

#search-results{
text-align:center;
color:#fff; 
font-family:Arial, sans serif;
height:50px;
line-height:50px;
}

#search-results span{
font-weight:bold;   
}

.search-wrap, .tags-wrap, .nav-wrap, #first-row i{
    -webkit-transition: all 0.3s cubic-bezier(0, .68, .07, 1); 
    -moz-transition: all 0.3s cubic-bezier(0, .68, .07, 1); 
    transition: all 0.3s cubic-bezier(0, .68, .07, 1);
    -ms-transition: all 0.3s cubic-bezier(0, .68, .07, 1);  
}

<div class='rbanner'>
    <a href='/'><img class='sr' align="left" border="0" height="70" src="mylogo.png" />
    <span class="sr1">Test</span><span class="sr2">Page</span></a>
</div>