Search code examples
csswordpresswoocommercecartstorefront

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

I want to remove storefront shopping cart located on the right side of my primary navbar and align my menu items to the right side of nav bar but I am not able to fully align my primary menu items to right side of my primary nav bar.

I cannot overlap on the space where initially shopping cart was after disabling the display of shopping cart with CSS.

There is always some space left on right side of my primary nav bar. I do not want to hack the core files because of the update problem of course.

Any solution?

Thanks

Solution

  • You can try this custom CSS that you can paste dirextly in the 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;
    }
}

    Or you can also paste that CSS rules in the style.css file of your active child theme (or theme).

    This is tested and works