Question

我正在尝试编辑Wordpress WooCommerce主题店面。

我想将徽标旁边的导航栏对齐。

在阅读了一些类似答案的stackoverflow问题之后，我尝试将显示更改为内嵌来阻止许多元素，但没有结果。（我将编辑后的代码添加到子主题的style.css）

我目前有类似的东西 - ＆gt; Navbar below logo我想要这样的事情 - ＆gt; Navbar beside logo

以下是店面主题中与主题导航相关的CSS。

＆＃13;

.primary-navigation {
    display: none;
}
.main-navigation:after, .main-navigation:before {
    content: "";
    display: table;
}
.main-navigation:after {
    clear: both;
}
.main-navigation div.menu {
    display: none;
}
.main-navigation div.menu:last-child {
    display: block;
}
.main-navigation .menu {
    clear: both;
}
.handheld-navigation, .main-navigation div.menu>ul:not(.nav-menu), .nav-menu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all, ease, .8s;
    transition: all, ease, .8s;
}
.handheld-navigation {
    clear: both;
}
.handheld-navigation ul {
    margin: 0;
}
.main-navigation.toggled .handheld-navigation, .main-navigation.toggled .menu>ul:not(.nav-menu), .main-navigation.toggled ul[aria-expanded=true] {
    max-height: 1750px;
}
.main-navigation ul {
    margin-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.main-navigation ul ul {
    display: block;
    margin-left: 1.41575em;
}
.main-navigation ul li a {
    padding: .875em 0;
    display: block;
}
.main-navigation ul li a:hover {
    color: #e6e6e6;
}
.site-main nav.navigation {
    clear: both;
    padding: 2.617924em 0;
}
.site-main nav.navigation:after, .site-main nav.navigation:before {
    content: "";
    display: table;
}
.site-main nav.navigation:after {
    clear: both;
}
.site-main nav.navigation .nav-next a, .site-main nav.navigation .nav-previous a {
    display: inline-block;
    -webkit-transition: all, ease, .3s;
    transition: all, ease, .3s;
    padding: .6180469716em 1em;
    border-radius: 3px;
}
.site-main nav.navigation .nav-previous {
    float: left;
    width: 50%}
.site-main nav.navigation .nav-previous a:hover {
    -webkit-transform: translate(-1em);
    -ms-transform: translate(-1em);
    transform: translate(-1em);
}
.site-main nav.navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%}
.site-main nav.navigation .nav-next a:hover {
    -webkit-transform: translate(1em);
    -ms-transform: translate(1em);
    transform: translate(1em);
}

＆＃13;

感谢您的支持。

Answer 1

使用以下代码更新子主题中的functions.php文件。请注意，这将删除购物车，搜索栏和辅助店面导航，以便导航链接与徽标保持一致。

add_action( 'wp_loaded', 'align_menu_right');

function align_menu_right() {
    remove_action( 'storefront_header', 'storefront_secondary_navigation', 30 );
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
    add_action( 'storefront_header', 'storefront_primary_navigation', 30 );

    if ( function_exists( 'storefront_header_cart' ) ) {
        remove_action( 'storefront_header', 'storefront_header_cart', 60 );
    }
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

并使用以下内容更新您的CSS：

<style>
    @media (min-width: 768px) {
        #masthead .col-full {
            display: flex;
            align-items: center;
        }

        #masthead .main-navigation {
            text-align: right;
        }

        .woocommerce-active .site-header div.site-branding {
            width: auto;
        }
    }
</style>

这基于plugin

在Wordpress Storefront主题旁边的Logo旁边对齐Navbar

1 个答案: