Vertically align burger menu in mobile mode - html

Question

I would like to vertically align the "hamburger" menu in mobile mode, in top AND sticky mode.
I tried this way, it works in sticky mode, but not in top mode:
.banner.navbar.navbar-default.navbar-static-top button
{
margin-top: 20px !important;
}
My website is the following: link
Source code:
<header class="banner navbar navbar-default navbar-static-top " role="banner" data-transparent-header="false">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="https://www.atvmototraveler.ro/">
<img data-rjs="2" class="logo-trans logo-reg" src="https://www.atvmototraveler.ro/wp-content/uploads/2022/10/atv_de_inchiriat_inchirieri_atv_inchirieri_motociclete_cluj_cluj_napoca_atvmototraveler-61x61#2x.png" alt="Atvmototraveler" data-rjs-processed="true" width="61" height="61">
<img data-rjs="2" class="logo-main logo-reg" src="https://www.atvmototraveler.ro/wp-content/uploads/2022/10/inchirieri_atv-inchiriat_inchirieri_atv_cluj_inchiriere_atv_de_inchiriat_rent_atv_cluj_logo-1-301x300#2x.png" alt="Atvmototraveler" data-rjs-processed="true" width="80" height="80">
</a>
</div>
</div>
<div class="themo_cart_icon"><i class="th-icon th-i-cart3"></i></div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" style="height: 0px;">
<ul id="menu-atv-de-inchiriat-meniu" class="nav navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-312 current_page_item menu-item-447"><i class="fa fa-home"></i> Închirieri ATV</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1245"><i class="fas fa-map-signs"></i> Trasee</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1207"><i class="fas fa-truck-monster"></i> Flota</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645"><i class="far fa-building"></i> Despre Noi</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724"><i class="fas fa-envelope"></i> Contact</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-557"><i class="fas fa-key"></i> Rezervă Acum</li>
</ul> </nav>
</div>
</header>

Answer 1

Try adding display flex.
header .container>.navbar-header::after, .container>.navbar-header::before {
content: none;
}
header .container>.navbar-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
width: 100%;
}