[Resolved] Mobile menu

[Pedro]

Hello! I need help with something.

I’ve been trying to set up the mobile header but I can not get it right.

I currently have it like this: https://www.dropbox.com/s/79a4pt30vn76013/IMG_2309.PNG?dl=0

I would like the header to be centered, and to move the location of the icons. I would like it to be in the following order:

Menu / Logo / Search / Cart

I hope you please help me. Thank you!

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

What do you mean you want the header to be centered? Like the logo?

Give this CSS a shot first:

#mobile-header .menu-toggle {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
}
#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello Tom! Thanks for answering.

I explain what I want to do, I would like it:

1. The logo of the site is centered.
2. On the left, the menu button is located
3. On the right, locate the search and cart button
4. The cart does not show the value of the products, on the contrary it shows the quantity of products in the cart.

Thank you!

[Leo]

I’m Leo 🙂

Can you try my CSS above first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo! Sorry! LOL

I already test the code and do what I want, however the cart icon keeps showing the price and not the quantity of the items in the cart.

Another thing that I would also like to do is that the search icon be replaced by a search section within the menu (only in the mobile version) Can it be done?

Thank you!

[Leo]

Do you want to show quantity on both desktop and mobile?

It’s quite complicated only having it on mobile but doable if you want both.

It’s also quite complicated to have the search bar only on mobile. I can point you in the right direction if you can tackle the styling part yourself?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo!

Already knowing this, then please help me show the amount of items in the cart in both versions (mobile and desktop)

Thank you!

[Leo]

Give this a shot:
https://generatepress.com/forums/topic/show-quantity-in-cart-in-menu-instead-of-total-costs/#post-332691

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo!

I have added the codes but now I see the texts “cart and item”

I just want you to show the number.

[Leo]

Not sure what you mean but this is what I see when I add one item:
https://www.screencast.com/t/pgWzIDgfBwY

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo!

That’s because I added another code that I found in the forum while you help me with this.

Using the code of the item you gave me, this happens: https://www.dropbox.com/s/1daneuk8hklct2y/Captura%20de%20pantalla%20de%202019-03-15%2013-22-28.png?dl=0

[Leo]

Awesome. So the issue is solved?

Can you let me know which code you’ve added?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo!

The problem is not solved. The code moves the cart’s location and search.

Also always shows a 0 when the cart is empty.

The code I used was:

function tu_custom_wc_cart_link() {
    ob_start();
	$no_items = '';

	if ( ! WC()->cart->get_cart_contents_count() > 0 ) {
		$no_items = 'no-items';
	}
    ?>
    <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
         <?php echo sprintf ( _n( '<span class="number-of-items ' . $no_items . '">%d</span>', '<span class="number-of-items ' . $no_items . '">%d</span>', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
    </a>
    <?php
    return ob_get_clean();
}

function tu_custom_wc_menu_cart( $nav, $args ) {
    if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return sprintf(
            '%1$s
            <li class="wc-menu-item %4$s" title="%2$s">
                %3$s
            </li>',
            $nav,
            esc_attr__( 'View your shopping cart','generate-woocommerce' ),
            tu_custom_wc_cart_link(),
            is_cart() ? 'current-menu-item' : ''
        );
    }

    // Our primary menu isn't set, return the regular nav
    return $nav;
}

function tu_custom_wc_mobile_cart_link() {
	if ( function_exists( 'generatepress_wc_get_setting' ) && ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
		return;
	}
	?>
	<div class="mobile-bar-items wc-mobile-cart-items">
		<?php do_action( 'generate_mobile_cart_items' ); ?>
		<?php echo tu_custom_wc_cart_link(); ?>
	</div><!-- .mobile-bar-items -->
	<?php

}

add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' );
function tu_wc_cart_link_fragment( $fragments ) {
	global $woocommerce;
	$fragments['.cart-contents span.number-of-items'] = ( WC()->cart->get_cart_contents_count() > 0 ) ? '<span class="number-of-items">' . wp_kses_data( WC()->cart->get_cart_contents_count() ) . '</span>' : '<span class="number-of-items no-items"></span>';
	return $fragments;
}

add_action( 'after_setup_theme','tu_remove_wc_cart_item' );
function tu_remove_wc_cart_item() {
    remove_filter( 'wp_nav_menu_items','generatepress_wc_menu_cart', 10, 2 );
    add_filter( 'wp_nav_menu_items','tu_custom_wc_menu_cart', 10, 2 );

    remove_action( 'generate_inside_navigation','generatepress_wc_mobile_cart_link' );
    remove_action( 'generate_inside_mobile_header','generatepress_wc_mobile_cart_link' );

    add_action( 'generate_inside_navigation','tu_custom_wc_mobile_cart_link' );
    add_action( 'generate_inside_mobile_header','tu_custom_wc_mobile_cart_link' );
}

[Tom]

I’m still just seeing the price. Is that code active right now?

What do you mean by moves the location?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pedro]

Hello Tom!

The code is not active at this time.

When I refer to which moves the items, is that by default the order is: Search / Cart

When I add the code it looks like this: Cart / Search

Also, when the cart is empty it shows a zero (0)

[Author]

Posts