[Resolved] Nav Menu Float Right – but align centre

[Stephen]

That works really well thanks.

– If the woo cart is added to nav menu using the Customising- Layout option then it has a drop down ‘mini cart sub menu’ option.

– Can I make my shortcode header cart-icon have the woo cart drop down sub menu ?

I’ve added the cart with shortcode in a hook element with the shortcode from code snippet.

add_shortcode( ‘cart_icon’, function() {
ob_start();
// Start your PHP below

echo generatepress_wc_cart_link();

// End your PHP above
return ob_get_clean();
} );

[David]

Whats the reason for the shortcode method ? Why not use the cart menu from the Customizer ?

[Stephen]

Hi, its just to keep it always on the right side of the header

[David]

Remove the shortcode method and enable the one in the Customizer, and we’ll figure out how to position it and keep your megamenus the way you want it.

[Stephen]

No problem, I’ve disabled the cart hook and activated cart in nav menu and the cart dropdown works well.

Previously the nav menu floated in the middle of header between logo and cart, now nav menu is on the right with cart inline.

– How can I get the cart icon on the right side with rest of nav menu floating between cart and header and also have the cart not move to the bottom line on narrower screen ?

Thank you
Stephen

[David]

Add this CSS:

@media(min-width: 1024px) {
    .nav-float-right #site-navigation {
        width: 100%;
    }
    .main-navigation .main-nav>ul {
        position: relative;
    }
    .main-nav {
        margin: auto;
    }
}

You may want to consider increasing the Mobile Menu Breakpoint to stop the menu getting squished on sub 1024px wide screens.

[Stephen]

Fantastic – thank you !

[David]

You’re welcome

[Author]

Posts