wordpress 在移动的模式中垂直对齐汉堡菜单

huus2vyu  于 2022-11-22  发布在  WordPress
关注(0)|答案(1)|浏览(154)

我想在移动的模式下垂直对齐“汉堡包”菜单,在顶部和粘性模式下。我试过这种方法,它在粘性模式下工作,但在顶部模式下不工作:

.banner.navbar.navbar-default.navbar-static-top button 
    {
         margin-top: 20px !important;
    }

我的网站如下:link
源代码:

<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"><a href="https://www.atvmototraveler.ro/cart/"><i class="th-icon th-i-cart3"></i></a></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"><a href="https://www.atvmototraveler.ro/" aria-current="page"><i class="fa fa-home"></i> Închirieri ATV</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1245"><a href="https://www.atvmototraveler.ro/trasee/"><i class="fas fa-map-signs"></i> Trasee</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1207"><a href="https://www.atvmototraveler.ro/flota/"><i class="fas fa-truck-monster"></i> Flota</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645"><a href="https://www.atvmototraveler.ro/despre-noi/"><i class="far fa-building"></i>&nbsp;Despre Noi</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724"><a href="https://www.atvmototraveler.ro/contact/"><i class="fas fa-envelope"></i> Contact</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-557"><a href="https://www.atvmototraveler.ro/product/inchirieaza-atv-cluj/"><i class="fas fa-key"></i> Rezervă Acum</a></li>
</ul>        </nav>
    </div>
</header>
o8x7eapl

o8x7eapl1#

尝试添加显示器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%;
}

相关问题