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! :)

WordPress ...