在 Wordpress 店面主题中的徽标旁边对齐导航栏答案

【问题标题】：Align Navbar Beside the Logo in Wordpress Storefront Theme在 Wordpress 店面主题中的徽标旁边对齐导航栏
【发布时间】：2017-11-21 22:16:57
【问题描述】：

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

我想将导航栏向右对齐，在徽标旁边。

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

我目前有这样的东西 -> Navbar below logo 我想要这样的东西 -> Navbar beside logo

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

.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);
}

感谢您的支持。

【问题讨论】：

如果没有一起查看 HTML 和 CSS 的工作示例，就很难判断出问题所在。
我的网站在本地主机上。我不知道具体怎么给你看。在 www.alkalinecopperbottle.com 我有一个上传了几天的版本，但我想这足以解决这个问题。
请使用导航栏 HTML 元素编辑您的问题。示例
html html
或
html html html
.

标签： html css wordpress themes navbar

【解决方案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

【讨论】：