[Resolved] Mobile menu

Home Forums Support [Resolved] Mobile menu

Home Forums Support Mobile menu

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #839274
    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
    #839276
    Leo
    Staff
    Customer Support

    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 */
    }
    #839358
    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!

    #839372
    Leo
    Staff
    Customer Support

    I’m Leo 🙂

    Can you try my CSS above first?

    #839376
    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!

    #839379
    Leo
    Staff
    Customer Support

    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?

    #839854
    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!

    #839920
    Leo
    Staff
    Customer Support
    #840026
    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.

    #840060
    Leo
    Staff
    Customer Support

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

    #840064
    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

    #840079
    Leo
    Staff
    Customer Support

    Awesome. So the issue is solved?

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

    Thanks!

    #840081
    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' );
    }
    #840226
    Tom
    Lead Developer
    Lead Developer

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

    What do you mean by moves the location?

    #840228
    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)

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.