Mobile Navigation Customizations

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Sure, I meant to before: https://3sternstaging.com/

We can give this PHP snippet a try:

add_action('wp',function(){ 
   add_action('generate_inside_mobile_header','generate_woo_cart'); // adds cart after header
});

function generate_woo_cart(){
	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
	);
}

Let me know :)

Thanks Ying, that worked. A few follow ups:

1) How would you suggest moving the the cart icon over so it's just to the left of the menu icon? I could probably use padding or negative margin, but is there an align property that might be better?

2) Is it possible to add a phone icon next to the cart icon that calls a number when clicked?

3) Is it possible to customize the top bar on mobile only, so we'd remove the "Free Shipping" text and leave only the top bar menu?

Here is a link to a screenshot for clarification: https://nimb.ws/UTQGPO

Thanks for the help.

You can use this CSS for question 1 and 3:

@media (max-width: 768px) {
    .top-bar #text-4 {
        display: none;
    }
}
#mobile-header .menu-bar-item.wc-menu-item {
    margin-left: auto;
}

For question 2, you can try using a Block element, add a GB's Buttons block for the phone SVG.
The link of the button would be tel:your-phone-number.
Choose generate_inside_mobile_header as hook, choose entire site as location.

Let me know if you need further assistance :)

Thanks Ying. I've added the phone icon via the block element. How would you move the phone icon over to the right without resorting to padding/margin?

https://nimb.ws/S6kb3o

1. Remove this CSS:
https://www.screencast.com/t/QPsnLZzL2wR

2. Add this CSS:

#mobile-header .inside-navigation > .gb-button-wrapper {
    margin-left: auto;
}

Let me know :)

Cool, that worked!

Ok, so to complicate things further I added a search bar (via shortcode) to the block element next to the phone icon.

The search bar is there now, but it pushes the phone, cart and menu icons down. Can you suggest some css to shorten the search bar and put all the elements on one line?

See screenshot: https://nimb.ws/yvxcVl

I was able to shorten the search bar by adding left/right margin to the grid container, but the icons still break onto the next line.

Maybe a better solution would be to activate the Generate Press search functionality but only on mobile?

Here's the URL again.

Thanks for your help, your support is top notch. :)

Can you suggest some css to shorten the search bar and put all the elements on one line?

I gave it a try, but seems there's not enough space to put everything in one line.

You can try activating nav search in customizer, and use CSS to hide it on desktop.

Thanks, Ying. Closing this out.

You are welcome Matt :)