Here’s another tweak that you can do on the Storefront theme.
If you want to move the main navigation/menu below or outside the header, you just need a few lines of code. There is no need to create a new header.php file on your child theme. Instead, just add this piece of code to your child theme’s functions.php file and you’re all set.
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' );
Before you do this, do know that it’s not really recommended to move the styles outside of its original location. After doing this, you will need to redo all the menu styles and that’s a lot of work.
Now you know how to move the navigation menu outside of header for storefront theme. Hope this worked for you. If not, feel free to post a comment and we’ll see what we can do to help you out.
I could fuggin kiss you! Thanks man
You’re welcome Clay! 😉
Hi,
What does 50 and 5 mean?
Hi Junita,
Those values denote the priority in which the function should be loaded. The lower the value the higher priority it is.
Hello,
Very good & helpful blog.
Thank you very much !!!!. Hugs from Brazil !!
Hi Anderson,
You’re welcome! 😀
From the Wooassist Team
I now have two primary-navigation!
BR
Hi Mau,
Make sure you have copied the code snippet completely. This is the part that removes the navigation:
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 )Make sure that this is on your code. If everything is in place, there is most likely a plugin conflict. It may be hard to tell at this point as we don’t know the current state of your website.