-
Hello GP/GB team!
I am experimenting with the new GB Beta version but I can’t achieve the desired layout for my header.
I have created a block element and have set it as a header for the entire site. Within this element, one of the containers is using a CSS grid with 3 columns. I am using the [gp_nav] shortcode to call the primary navigation on the left column and an image for my logo in the middle column. When I enable the woocommerce mini cart from Customizer>Layout>Woocommerce the mini cart is placed as the last item in the primary nav.I would like to show the minicart on the rightmost column (maybe along with a searchbar and a wishlist). Let’s focus on the mini cart first, how could I achieve this?
My current layout: https://ibb.co/Qnt7q6h
How it looks and what I want to achieve: https://ibb.co/JQGPpfSThe reason I am experimenting with all this, is because of the new global styles, allowing us to use css grid, position:sticky and other cool features. So as an extra question for the team, is it considered good practice to have a header entirely built with GB? Or should I scrap all that process entirely and go back to controlling my header via GP/customizer?
Thank you in advance for your excellent work and potential help!
-
Hi there,
Can I see the site?
Or maybe you can try using the Mini cart block in your element.
-
Added the link in the private information area.
I have tried using the mini-cart block but I quite prefer the looks and structure of the GeneratePress minicart over the block one (one is dropdown the other is a drawer sliding from the side of the page). If there is no other easy solution however, I might end up using the block and fighting against it with css.
Edit: At the moment I have also put the mini-cart block on the right side where I would like the GP-generated mini-cart to be, so you can see the differences for yourself. But I would really appreciate if I could move the GP minicart over there.
-
1. Use this PHP code to create a shortcode for the cart:
function generate_woo_cart(){ ob_start(); if ( ! class_exists( 'WooCommerce' ) ) { return; } if ( ! isset( WC()->cart ) ) { return; } $has_items = false; if ( ! WC()->cart->is_empty() ) { $has_items = 'has-items'; } printf( '<span class="menu-bar-item wc-menu-item %2$s %3$s"> %1$s </span>', generatepress_wc_cart_link(), is_cart() ? 'current-menu-item' : '', $has_items ); return ob_get_clean(); } add_shortcode('custom_cart', 'generate_woo_cart');2. Add the shortcode
[custom_cart]to your element 🙂 -
Thank you Ying!
The only issue now is that there is no hover state on the newly printed cart. Even with the ‘Display mini cart sub-menu’ option checked in the Customizer. The minicart that is printed inside the main nav by GeneratePress still works perfectly on hover, but the one printed by the shortcode doesn’t. Any workaround for that?
-
Hum.. i updated the PHP code, give it another try 🙂
-
Seems to be working nicely Ying, thank you so much for the quick help!
Last question on this topic, currently when you hover over the mini-cart generated by our new shortcode, the sub-menu grows down and right all the way to the edge of the screen. Basically it fills the space to the right. The one generated on the main nav looks to be growing down and left, which is what I would prefer. What is the correct way to go about this?
What is happening: https://ibb.co/pxzxr7x
What I want to achieve: https://ibb.co/fkPZGzx -
Hi there,
add this CSS to fix that:
.wc-menu-item { position: relative; } -
Thank you David, that worked!
-
Glad to hear that
- You must be logged in to reply to this topic.