Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / Code Snippets / How to Move the Navigation Menu Outside of Header for Storefront

How to Move the Navigation Menu Outside of Header for Storefront

February 26, 2015 By Nick J 9 Comments

Here’s another tweak that you can do on the Storefront theme.

Move the Navigation Menu Outside of Header

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.

People that read this article also liked

How to Rename Primary Menu in Mobile View for Storefront Theme How to Change the Arrows in Pagination for Storefront and WooCommerce How to Remove Horizontal Line under Page Title in Storefront Theme How to Make WooCommerce Pages Full Width in Storefront Theme

Filed Under: Code Snippets, How-To Articles Tagged With: code snippet, design tweaks, how-to, navigation, Storefront, woothemes

Comments

  1. Clay says

    May 5, 2017 at 7:07 am

    I could fuggin kiss you! Thanks man

    Reply
    • Rob says

      May 29, 2017 at 10:36 am

      You’re welcome Clay! 😉

      Reply
  2. Junita says

    January 31, 2018 at 10:36 am

    Hi,
    What does 50 and 5 mean?

    Reply
    • Rob says

      February 27, 2018 at 1:16 pm

      Hi Junita,

      Those values denote the priority in which the function should be loaded. The lower the value the higher priority it is.

      Reply
  3. Shib Nandy says

    May 25, 2018 at 11:05 am

    Hello,
    Very good & helpful blog.

    Reply
  4. Anderson Torres says

    June 16, 2018 at 6:56 am

    Thank you very much !!!!. Hugs from Brazil !!

    Reply
    • Rob says

      June 22, 2018 at 11:44 am

      Hi Anderson,

      You’re welcome! 😀

      From the Wooassist Team

      Reply
  5. Mau Castro says

    July 15, 2020 at 2:19 am

    I now have two primary-navigation!

    BR

    Reply
    • Rob says

      August 6, 2020 at 11:41 am

      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.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales