bananajuice on "Storefront - Reposition the cart & contents"

Hello there,

I have intermediate web skills and i'm helping someone out with a project. I've been using Shopify and have migrated to Storefront - using a child theme.

I have little understanding of PHP and intermediate HTML/CSS skills but i'm heavily customising the site - I've managed to figure out most things through perseverance but this one has me stumped!

I've added Ubermenu and have redesigned the menubar, so far so good. However, I would like to move the cart / cart contents / my account area etc to a sticky bar above the header.

So far this is what i've been able to achieve (ignore the ugly green text!)
Image 1: http://i64.tinypic.com/ubuo.jpg (I have managed to get the cart out of the menu bar - but it won't move from this position whatever I do!)
Image 2: http://i63.tinypic.com/xf4ie.jpg - It disappears on mobile and I get a bullet point with no content? (don't know why!)

This is my PHP I have added into my functions.php child theme file - i'm wondering if it's OK? (It's a combination of stuff i've found from various Google searches)

function register_custom_menus()
{ register_nav_menu('top-menu',__( 'Top Menu' ));
}
add_action( 'init', 'register_custom_menus' ); function storefront_top_cart() { if ( is_woocommerce_activated() ) { if ( is_cart() ) { $class = 'current-menu-item'; } else { $class = ''; } ?> <ul class="site-header-cart menu top-cart"> <li class="<?php echo esc_attr( $class ); ?>"> <?php storefront_cart_top_link(); ?> </li> <?php the_widget( 'WC_Widget_Cart', 'title=' ); ?> </ul> <?php } } function storefront_cart_top_link() { ?> <a class="cart-contents" href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" title="<?php _e( 'View your shopping cart', 'storefront' ); ?>"> <?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?> || <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'storefront' ), WC()->cart->get_cart_contents_count() ) );?></span> </a> <?php }
add_filter( 'wp_nav_menu_items', 'add_basket_box', 10, 2 );
function add_basket_box( $items, $args )
{ if ($args->theme_location == 'top-menu') $items .= '<li>'.storefront_top_cart().'</li>'; } retu $items;
}

Finally, does anyone know the related CSS to make this appear as a responsive black bar? with a checkout and my account area?

I'm incredibly confused and any help would be GREATLY appreciated! :)