Toggle button should be center align in Tab/Mobile View

[shahzadsiddiqui8]

I am making a responsive header in Mobile and in Tab view I need my toggle button should be center aligned it is coming in right side.

instead of toggle Button I need only Menu Text with drop down menu icon…

HTML:

 <div class="container-fluid pa0">
 	<div class="row-fluid">
 		<div class="container">
 			<div class="navbar navbar-default navStyle">
 				<header id="header-site">
 				
 					<div class="logo-site">
						<h1><a href="#">Leistung</a></h1>
 					</div>
 					
 					<ul class="nav navbar-right pull-right userProfile">
 						<li class="dropdown"> 
 							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
 								<img alt="" class="img-circle" src="./assets/images/shahzad.jpg" width="30"> 
 							<span class="hidden-xs">Hello Dave</span> 
 							</a>
 							<ul class="dropdown-menu">
 								<li><a href="#"><i class="fa fa-fw fa-user"></i> Edit Profile</a></li>
 								<li><a href="#"><i class="fa fa-fw fa-cog"></i> Change Password</a></li>
 								<li class="divider"></li>
 								<li><a href="#"><i class="fa fa-fw fa-power-off"></i> Logout</a></li>
 							</ul>
 						</li>
 					</ul>
 					
 					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 						<span class="sr-only">Toggle navigation</span> 
 						<span class="">Menu</span> 
 					</button>
 					
 					<!--End::Header Right-->
 				</header>
 			</div>
 		  </div>
 		</div>
 			<div class="row-fluid topmenu">
 				<div class="container">
 					<div class="navbar navbar-default topmenuStyle">
 						<!--Begin::Nav-->
 							<div class="collapse navbar-collapse pa0" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav navbar-left">
 									<li><a id="home" href="#">Home</a></li>
									<li><a id="about" href="#">About</a></li>
 									<li><a id="" href="#">Service</a></li>
									<li><a id="" href="#">Contact</a></li>
								</ul>
 							</div>
 							<!--End::Nav--> 
 					</div>
 				</div>
 			</div>
 </div>

css:

body {
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    line-height: 22px;
    white-space: normal;
}

.navStyle{
border:0px;
background:#fff;
margin-bottom:0px;
}

.topmenu{
background:#6402aa;
margin-bottom:0px;
height:60px;
padding: 4px 0px;
margin-bottom:0px;
}

.topmenuStyle{
background:#6402aa;
border:0px;
border-radius:0px;
margin-bottom:0px;
}

.topmenuStyle ul  li a{
color:#fff;
text-shadow:none;
font-size:16px;
}

.navbar.navbar-default.topmenuStyle a{
color:#fff;
text-shadow:none;
font-size:16px;
}

.navbar.navbar-default.topmenuStyle a:hover, .navbar.navbar-default.topmenuStyle a:focus{
color:#fff;
}

#header-site {
    background: #fff none repeat scroll 0 0;
    border-bottom: 0px solid #cf4137;
    top: 0;
    width: 100%;
}
.logo-site {
    float: left;
    height: 50px;
    margin: 5px 0 0px 10px;
    width: 140px;
}
.logo-site h1 {
    margin: 0;
}
.logo-site h1 a {
    float: left;
    height: 46px;
    width: 110px;
    text-indent:-999px;
    background-image:url('../images/btlogo.png');
    background-repeat:no-repeat;
    background-position:0px; 
    background-size:100px;
}

.navStyle .userProfile {
	color:#000;
}

.navStyle .userProfile img{
margin-right: 10px;
}

.navStyle .userProfile a{
color:#666;
font-size:14px;
}

ul.userProfile .open > a, ul.userProfile .open > a:hover, ul.userProfile .open > a:focus {
    background-color: #fff;
    border-color: #000;
}

ul.userProfile li a:hover, ul.userProfile li a:focus{
	background-color:transparent;
}
/*Notification Bell dropdown*/


@media(max-width:768px){
.navbar-collapse{ clear:both;}
    
}

[shahzadsiddiqui8]

I got the solution please do not work on this post…