How to move menu and cart outside header

Hi there Padodalu!
I don’t understand why you want that. The header is usually where the nav is located. If you don’t look the background image of the header that can be removed. Please reply with some more explanation of what you want to achieve.

Thanks for response. I’ll try to show the idea with pictures.

This is how I have the menu and cart right now:
bad example

This is how I want it to be:
good example

[ No bumping please. ]

I found this code –

function child_theme_init() {

	remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
	add_action( 'storefront_before_content', 'woa_primary_nav_wrap', 5 );
	add_action( 'woa_primary_nav', 'storefront_primary_navigation' );
}
add_action( 'init', 'child_theme_init' );

function woa_primary_nav_wrap() {
	?>
		<div class="col-full primary-nav-wrap">
			<?php do_action( 'woa_primary_nav' ); ?>
		</div>
	<?php
}

Seems to do the trick with menu. However, cart is still out of position and now the header picture shrinked and doesn’t look good, see picture –
After code

Can you link to your site please? or is it local? I might be able to use css in order to move the navbar.

Thanks for response. I put it on host here –
Site link

Sorry this took so long… But here is the code:

<?php
if ( ! function_exists( 'storefront_header_cart' ) ) {
	function storefront_header_cart() {
		if ( is_woocommerce_activated() ) {
			if ( is_cart() ) {
				$class = 'current-menu-item';
			} else {
				$class = '';
			}
		?>
		<ul class="site-header-cart menu">
			<li class="<?php echo esc_attr( $class ); ?>">
				<?php storefront_cart_link(); ?>
			</li>
			<li>
				<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
			</li>
		</ul>
		<?php
		}
	}
}

if ( ! function_exists( 'storefront_primary_navigation' ) ) {
	/**
	 * Display Primary Navigation
	 * @since  1.0.0
	 * @return void
	 */
	function storefront_primary_navigation() {
		?>
		<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_html_e( 'Primary Navigation', 'storefront' ); ?>">
		<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false"><?php echo esc_attr( apply_filters( 'storefront_menu_toggle_text', __( 'Navigation', 'storefront' ) ) ); ?></button>
			<?php
			wp_nav_menu(
				array(
					'theme_location'	=> 'primary',
					'container_class'	=> 'primary-navigation',
					)
			);

			wp_nav_menu(
				array(
					'theme_location'	=> 'handheld',
					'container_class'	=> 'handheld-navigation',
					)
			);
			?>
		</nav><!-- #site-navigation -->
		<?php
	}
}

function child_remove_parent_function() {
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50);
    remove_action( 'storefront_header', 'storefront_header_cart', 60);
}
add_action( 'wp_loaded', 'child_remove_parent_function' );

function child_theme_init() {
	add_action( 'storefront_before_content', 'woa_primary_nav_wrap', 5 );
	add_action( 'woa_primary_nav', 'storefront_primary_navigation', 5 );
	add_action( 'woa_primary_nav', 'storefront_header_cart', 10 );
}
add_action( 'init', 'child_theme_init' );

function woa_primary_nav_wrap() {
	?>
		<div class="col-full primary-nav-wrap">
			<?php do_action( 'woa_primary_nav' ); ?>
		</div>
	<?php
}

Copy that into your functions.php in your child theme and I think that should do the trick ?? you can style the menu after this ofc.

Unfortunately something isn’t right – when I copy the code in my functions.php file the site crashes, both front and admin panel – I get white screen. Tried both ways – through admin panel (Appearance/Editor) and Filezilla too. Maybe I’m doing something wrong there?

You are using a child theme right? What else is in your functions.php? Have you modified something else?

I used the code on a test site running storefront and it worked for me.

Isn’t storefront theme working as child theme too? Or I’m missing something?

Just made a fresh wordpress install, then added woocommerce plugin, added storefront theme and edited it’s functions.php with your code – got the white screen again. No changes were made anywhere else.

OK, got a progress with you code finally, see the link please –
Site link
Menu is on the right spot, but there’s a problem with cart – it’s one level lower than it should be and the width of it is wrong. Also, the header image is smaller now and I don’t know how to fix that too. Sorry for the mess, I’m not very good with coding.

How did you make the code work? Some of the css is remove.

You need a child theme to edit the functions.php file. If you edit storefront theme, all modifications will be remove the next time you update. So try to create a child theme, copy the code into the functions.php in the new child theme and let me know if you get another white screen.

The header image can be fixed by apply some padding:

.site-header {
padding-bottom: 1em;
}

OK, so I made a new demo site with nothing added, just pure wordpress, woocommerce, storefront, made a child theme from it and copied your code in functions.php –
Site link
I also added padding to header as you advised and it seems to do the trick. However the hight between header and menu on homepage is too wide, on other pages it’s OK, see pictures –
Bad hight
Just what I would like
And the cart still is off – one line below menu and justified to all page. If these 2 things could be fixed somehow it would be perfect.

And about the functions.php, the original text is like this –

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css' );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css' );

// END ENQUEUE PARENT ACTION

If I put your code below I get white page, so I replaced this part with it –

<?php

And it did the trick – no white page right now.

Sorry, this took so long time to figure out, but here is the css that should make it look the way you want it to:

header#masthead {
    margin-bottom: 0.236em;
}

.nav-menu {
    width: 67%;
    float: left;
}

cart-contents {
    width: 33%;
    float: right;
}

Added this one to CSS, menu and header looks great now, big thank you! However, cart width is still wrong and it’s over menu buttons so I can’t press them anymore.
Site link

You can change the width of the cart in the css I gave you. Just play around with the 33% until it looks good.