Vertically align burger menu in mobile mode-CodePudding

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  role="banner" data-transparent-header="false">
        <div >
        <div >
            <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">
                <span >Toggle navigation</span>
                <span ></span>
                <span ></span>
                <span ></span>
            </button>
            <div id="logo">
                <a href="https://www.atvmototraveler.ro/">
                                            <img data-rjs="2"  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"  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 ><a href="https://www.atvmototraveler.ro/cart/"><i ></i></a></div>
        <nav  role="navigation" style="height: 0px;">
            <ul id="menu-atv-de-inchiriat-meniu" ><li ><a href="https://www.atvmototraveler.ro/" aria-current="page"><i ></i> Închirieri ATV</a></li>
<li ><a href="https://www.atvmototraveler.ro/trasee/"><i ></i> Trasee</a></li>
<li ><a href="https://www.atvmototraveler.ro/flota/"><i ></i> Flota</a></li>
<li ><a href="https://www.atvmototraveler.ro/despre-noi/"><i ></i>&nbsp;Despre Noi</a></li>
<li ><a href="https://www.atvmototraveler.ro/contact/"><i ></i> Contact</a></li>
<li ><a href="https://www.atvmototraveler.ro/product/inchirieaza-atv-cluj/"><i ></i> Rezervă Acum</a></li>
</ul>        </nav>
    </div>
</header>

CodePudding user response：

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%;
}