Moving Storefront menu bar and cart to top

Hi,

How can I properly move the menu bar to be above the site-header picture? There seem to be several classes that all affect the header, and I’m not sure which are the ones to change. I succeeded to moving it to the top, but I had to add a negative margin, which makes me think there’s a better way. I also want to move the cart to the top, but it’s not even connected to the menu bar.

How can I do this most effectively?

In the Additional CSS I added:

.site-header {
    height: 700px;
}

.main-navigation ul.menu, .main-navigation ul.nav-menu
{

    height: 32px;
    position: fixed;
    top: 0;
    background: #23282d;
	padding-top: 0;
	margin-top: -20px;
}

.storefront-primary-navigation 
{

    height: 32px;
    position: fixed;
    top: 0;
    background: #23282d;
	padding-top: 0;
	margin-top: 0;
}
.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
    background-color:#f0f0f0;
}

The page I need help with: [log in to see the link]