Navbar Mods

Archives rtPanel
#1

I’m trying to achieve a few things for my WooCommerce enabled WP installation.

  1. Sticky navbar
  2. Add cart to navbar

1. Sticky navbar
I tried this tutorial already available here, but seems to have a few issues.

Primarily I’m having 3 items in my navbar which contains dropdown list + 1 cart to be added to right end of primary navbar. The code mentioned in the above article makes the items in navbar to float in the center. I need it to be on the left. I can do it be using specific values instead of the margincalculate parameter. But whatever margin value I give it doesn’t take effect.
Another issue with sticky navbar is even it have is sticking to the top when I scroll, the content in other div appears to be above it such that the navbar is in a layer below the content.

How do I tackle this?

2. Add cart to navbar
I’m looking to add a cart to my navbar as in rtCamp’s site. Any thoughts on this?

#2

1. Sticky navbar
For sticky navbar, I have modified the same jQuery code. Use below code in your .js file,

jQuery( document ).ready( function() {  
    /* Calculate height of header wrapper */  
    var aboveHeight = jQuery('#header-wrapper').outerHeight();  
      
    /* Check if scroll is more than header wrapper */  
    jQuery( window ).scroll( function() {  
        var fix_element = jQuery('#rtp-primary-menu');  
        var headerwrap      = jQuery("#header-wrapper").offset();  

        /* Add sticky style to navigation bar */  
        if ( jQuery( window ).scrollTop() > aboveHeight ) {  
            fix_element.css({  
            'top': '0px',  
            'position' : 'fixed',  
            'z-index' : '1000'  
            } );  
        } else {  
            fix_element.css({   
            'position': 'relative',  
            'top': '0px'  
            } );  
        }  
    });  
} );

2. Add cart to navbar
To add count (with cart link) in your navigation bar, use following code in your funcitons.php file,

/*   
 * Below code will add cart button after navigation  
 */  
function rtp_header_cart() {  
global $woocommerce;  
	if ( array_key_exists( 'cart', $woocommerce ) && !empty( $woocommerce->cart ) ) {  
		    if ( sizeof( $woocommerce->cart->cart_contents ) !== 0 ) {  
		echo '' . __('Cart', 'rtPanel') . '' . $woocommerce->cart->cart_contents_count . '';  
		    }  
	}  
}  
add_action( 'rtp_hook_end_primary_menu', 'rtp_header_cart' );
/**  
 * Update header cart summary when new item added to cart  
 */  
function rtp_woocommerce_header_add_to_cart_fragment($fragments) {  
    global $woocommerce;  
    ob_start(); ?>  
      
        <?php echo __('Cart', 'rtPanel') . '' . $woocommerce->cart->cart_contents_count . ''; ?>  
    <?php  
    $fragments['a.cart-contents'] = ob_get_clean();  
    return $fragments;  
}  
add_filter( 'add_to_cart_fragments', 'rtp_woocommerce_header_add_to_cart_fragment' );

Let me know if you have any doubt.

#3

It works!
Thanks! :slight_smile:

I still have a few issues though and that’d be CSS.

Though I understand the cart is being added not in the primary nav since rtp_hook_end_primary_menu is used. Is there some hook to hook the rtp_header_cart into the primary nav itself so as to use the default nav CSS?

#4

To add cart menu in the navigation, you will need to use wp_nav_menu_items filter. Kindly replace previous functions with a new functions given below,

/*  
 * Below code will add cart button after navigation  
 */  
function rtp_header_cart( $items, $args ) {  
    if ( $args->theme_location == 'primary' ) {  
        global $woocommerce;  
        if ( array_key_exists( 'cart', $woocommerce ) && !empty( $woocommerce->cart ) ) {  
            if ( sizeof( $woocommerce->cart->cart_contents ) !== 0 ) {  
                return $items . '
  • ' . __( 'Cart', 'rtPanel' ) . ' ' . $woocommerce->cart->cart_contents_count . '
    • ';  
            }  
        }  
    }  
    return $items;  
}  
add_filter( 'wp_nav_menu_items', 'rtp_header_cart', 10, 2 );
    /**  
 * Update header cart summary when new item added to cart  
 */  
function rtp_woocommerce_header_add_to_cart_fragment( $fragments ) {  
    global $woocommerce;  
    ob_start(); ?>  
    <?php  
        echo __( 'Cart', 'rtPanel' ) . ' ' . $woocommerce->cart->cart_contents_count . ''; ?>  
    <?php  
    $fragments['a.cart-contents'] = ob_get_clean();  
    return $fragments;  
}  
add_filter( 'add_to_cart_fragments', 'rtp_woocommerce_header_add_to_cart_fragment' );

    This function will add cart menu in your navigation.

    #5

    Thanks again Manish! I had to add a CSS line to get it sorted.
    added .rtp-show-cart{float: right !important;} to move the menu item with cart to the right as initially the alignright CSS class wasn’t working as needed.

    But currently the item is shown on the right corner of browser in the navbar, but when I scroll down and when the sticky navbar comes into action the cart item relocates its position to right after the last item in navbar.

    Any thoughts?

    #6

    Seems like position: fixed; is creating an issue in this case. I’ve modified jQuery, kindly replace this code with previous one.

    jQuery( document ).ready( function() {  
    /* Calculate height of header wrapper */  
    var aboveHeight = jQuery('#header-wrapper').outerHeight();  
    var menuWidth = jQuery("#rtp-primary-menu").outerWidth();  

      
    /* Check if scroll is more than header wrapper */  
    jQuery( window ).scroll( function() {  
        var fix_element = jQuery('#rtp-primary-menu');  
        var headerwrap      = jQuery("#header-wrapper").offset();  

        /* Add sticky style to navigation bar */  
        if ( jQuery( window ).scrollTop() > aboveHeight ) {  
            fix_element.css({  
            'top': '0px',  
            'position' : 'fixed',  
            'z-index' : '1000',  
            'max-width' : menuWidth,  
            'width' : '100%'  
            } );  
        } else {  
            fix_element.css({   
            'position': 'relative',  
            'top': '0px'  
            } );  
        }  
    });  
} );

    In the above code, I’ve checked the menu width and applied the same while page is scrolling, so no need to add !important for .rtp-show-cart selector.

    #7

    It works fine now, though th !important is still needed. Not an issue though.

    Thanks again for the support! :slight_smile:

    #8