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

Question

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

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

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

我目前有这样的东西 - 徽标下方的导航栏>我想要这样的东西 -徽标旁边的>导航栏

以下是店面主题中与主题导航相关的 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);
}

感谢您的支持。

Answer 1

使用以下代码更新子主题中的函数.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>

这是基于一个插件