Move nav bar below (outside of) header

You can do it 1 of two ways. You can use css to reposition the nav

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>

or you can hack the header.php file and move the code for the header to where you would like it to appear.

Thanks, Jay. Looks like I need to put the nav in function storefront_before_content, but that’s where I get stuck.

You don’t have to create a new header.php on your child theme. This code should work for you, just paste this on your child theme’s functions.php

function child_theme_init() {

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

You can also do this for other elements on the header, as Storefront uses hooks for most of its structure. Hope this helps!

Cool. I added a ‘<div class=”col-full”>’ to function ‘storefront_primary_navigation’ to position it in the right place horizontally.

Just needs a bit of styling now.

Many thanks for your help.

Do you mean you modified the function directly on the Storefront theme? We don’t really recommend you doing that as you might lose your changes when you update your theme.

Try considering doing something like this:

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
}

Basically, what we are doing here is register a new area to hook functions, and added storefront_primary_navigation in there. With this you can modify the classes on the <div> wrapper in that function.

Actually, no – I put the modified function in the functions.php in my child theme. Works OK now, and I’m trusting that putting it there will preserve it when updates are installed.

I tried your suggestion, but it didn’t give me the full width div I was looking for.

Planning to get to grips with this ‘hooks’ stuff asap, but haven’t done yet. I’ve got lynda.com and I see there’s something on there about it. Will defo watch that later.

Thanks again.

Ahh I see. So you’ve override the original function via your child theme.
Although not really recommended for most themes, but that is okay to do with Storefront.

Your welcome @thewebplumber. Glad we could help you out on this!

Hi there,

I am working on our site on a local server so I can not send you a link. But I am using the storefront theme and I added the code you suggested above to move the nav menu and that works beautifully except now when I want to add another function to the file I keep getting errors. I am trying to remove the breadcrumbs and the sku from the woo commerce files. Can you help me figure this out? am I missing something in my file?