Logo with Brand Text Inside Navbar and Mob Menu - html

Question

I got 2 questions.
1st: How do I put my Logo + Brand Text inside my navbar? I want it at the left end of the nav and inline.
2nd: I want it to appear at the center of my Mob Menu.
I tried putting it at li tag but someone told me it shouldn't be there. So, I'm kinda clueless where will I put it and what tag will I use and how will I insert it in the nav. I've been figuring it out for almost 2 weeks now but I just destroy some elements.
HTML:
<div id="fixed">
<div id="search-wrap" class="wrap-top search-wrap">
<div class="width">
<ul class="clearfix">
<li ><i class="fa fa-search"></i> <input type='search' placeholder="Search..."></li>
<li id="li-3">Search</li>
<li id="li-4"> <i class="fa fa-times"></i> </li>
</ul>
</div>
</div>
<div id="tags-wrap" class="wrap-top tags-wrap">
<div class="width">
<ul class="clearfix">
<li>tag#1</li>
<li>tag#2</li>
</ul>
<div id="search-results"></div>
</div>
</div>
<div id="nav-wrap" class="wrap-top nav-wrap">
<div class="width">
<ul class="clearfix">
<li>Link#1<span>Sub-link#1</span></li>
<li>Link#2<span>Sub-link#2</span></li>
<li id="search-btn" class="s-desk"> <i class="fa fa-search"></i> </li>
</ul>
<i class="fa fa-reorder fa-2x menu-mob" id="menu-mob"></i>
</div>
</div>
</div>
</div>
CSS:
#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);
}
My Logo + Brand Text:
<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>
Sample Preview:
Desktop and Mobile View
Thanks!