How to move navbar toggle button to right on small screens - toggle

Question

Navbar toggle button is coming in center on small screen. how can i move it to right??
i tried few ways but it is not working. However the navbar works fine on medium and large screens.
here is my code:
""
<!-- ========================= Theme Feature Page Menu ======================= -->
<nav class="navbar float-right navbar-expand-lg navbar-expand-md theme-main-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle float-xs-right collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menu</span>
Menu
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown-holder">ABOUT COLLEGE
<ul class="sub-menu">
<li>College Profile</li>
<li>Principals Message</li>
<li>Vision & Mission</li>
<li>Committee List</li>
<li>Photo Gallery</li>
</ul>
</li>
<li>CONTACT
</ul>
</div><!-- /.navbar-collapse -->
</nav> <!-- /.theme-feature-menu -->
</div>
</header> <!-- /.theme-main-header -->""

Answer 1

Within the desired CSS file of yours declare definition sizes and then use float: right;
Example:
#media (min-width: 576px) and (max-width: 767px) {
.navigation.navbar {
float: right;
display: inherit !important;
padding: 0;
width: 100%;
}
.navigation .navbar-collapse {
background: #fff;
padding: 20px;
margin-top: 56px;
position: absolute;
width: 100%;
margin-right: 20px;
z-index: 999;
}
.navigation.navbar-dark .navbar-nav .nav-link {
padding: 10px 0;
color: #000;
}
.navigation.navbar-dark .navbar-toggler {
border-color: #fff;
float: right;
}}
Without the float atrribute the navbar will not responsively move to the given definitions.