删除购物车菜单并将主菜单与店面主题的右侧对齐

Question

我想删除位于主导航栏右侧的店面购物车，并将我的菜单项与 导航栏 的右侧对齐，但我无法完全将我的主菜单项与主 导航栏 的右侧对齐。

在使用 CSS 禁用购物车显示后，我无法在最初购物车所在的 space 上重叠。

我的主要 导航栏 的右侧总是有一些 space。我当然不想因为更新问题而破解核心文件。

有什么解决办法吗？

谢谢

Answer 1

您可以试试这个自定义 CSS，您可以直接将其粘贴到 Customizer > Additional CSS:

/*
 * Hidding cart menu item on all screens
**/
.storefront-primary-navigation>.site-header-cart.menu {
    display: none;
}

/*
 * Re-styling main menu to the right just for desktop screens
**/
@media (min-width: 768px) {
    .storefront-primary-navigation>.main-navigation {
        float: right !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        text-align: right !important;
    }
    .storefront-primary-navigation>.main-navigation>.menu>ul>li {
        text-align: right !important;
    }
    .main-navigation ul.menu>li:first-child,
    .main-navigation ul.nav-menu>li:first-child {
        margin-left: 0;
    }
    .main-navigation ul.menu>li:last-child,
    .main-navigation ul.nav-menu>li:last-child {
        margin-right: -1em;
    }
}

或者您也可以将 CSS 规则粘贴到您的活动子主题（或主题）的 style.css 文件中。

这已经过测试并且有效

删除购物车菜单并将主菜单与店面主题的右侧对齐

Remove shopping cart menu and align main menu to the right on Storefront theme

css

wordpress

cart

storefront

woocommerce