[Resolved] Switching the cart icon's location without displacing in mobile

[toasterpc]

Hey there, so this is part two of out current issues list:

To replicate the desired behaviour of this picture:
I managed to change the cart location to the secondary menu, which I then placed alongside the search bar using a Hooks element with after_header like this:

<div class="second-nav grid-container">
	<?php generate_secondary_navigation_position(); ?>	
</div>

with a priority of 15.

Yet, after the change, it seems that the cart icon and submenu have stopped functioning when the width equals the mobile layout, which has kind of hindered our ability to perform business for the moment.

If anyone could help us sort this out, it would be truly a blessing.

[Tom]

Hi there,

The cart sub-menu isn’t designed to work on mobile at the moment. We decided it was better UX to just go to the cart page.

We can manually hook the icon into the Mobile Header if you’d like?

Let me know 🙂

[toasterpc]

Hi Tom,

Sure, that’d be lovely.

[Tom]

Try this function:

add_action( 'generate_inside_mobile_header', function() {
    if ( ! function_exists( 'generatepress_wc_get_setting' ) ) {
        return;
    }

    if ( ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return;
    }

    $has_items = false;

    if ( ! WC()->cart->is_empty() ) {
        $has_items = ' has-items';
    }
    ?>
        <div class="mobile-bar-items wc-mobile-cart-items<?php echo $has_items; ?>">
            <?php do_action( 'generate_mobile_cart_items' ); ?>
            <?php if ( function_exists( 'generatepress_wc_cart_link' ) ) {
                echo generatepress_wc_cart_link(); 
            } ?>
        </div><!-- .mobile-bar-items -->
    <?php
} );

Let me know 🙂

[toasterpc]

Great! It worked. Thanks for the help.

Though the icon on both locations seems to be displaced. Would increasing padding help in this case?

[Tom]

You can try adjusting your positioning like this:

.secondary-navigation a.cart-contents:before {
    position: relative;
    top: 5px;
}

#mobile-header a.cart-contents:before {
    position: relative;
    top: 10px;
}

[toasterpc]

All right! It worked perfectly on desktop, though on mobile there were no results.

Also, I just got orders to create Mega Menus with QuadMenu, and it seems using the plugin leads to both the secondary menu disappearing and to the primary menu behaving erratically on mobile.

I believe this may fall a little bit outside the scope of the current issue, so please let me know if I should open another thread and continue the troubleshooting there.

[Tom]

I just adjusted the CSS.

I think you would need a cart feature built into the mega menu plugin, unfortunately.

[toasterpc]

Alright then, I’ll look into it. Thanks for the help!

[Tom]

No problem 🙂

[Author]

Posts