Do you want to move the primary menu to a different location in your WooCommerce store? WooCommerce is flexible for customization, which is why it powers many online stores. WooCommerce is backed up by more than 5 million active installations in the WordPress community. With all that user-data, they can get enough feedback to improve significantly towards what their users want.
Storefront Move Primary Menu
WooCommerce does not have a built-in option to change the position of the primary menu. It is very easy to set the primary menu in the WordPress Menu Editor. The Storefront theme supports the primary menu, secondary menu, and a handheld menu. Menus can be edited using the built-in WordPress Menu Editor located at Appearance > Menu.
The WooCommerce Storefront theme displays the primary menu just below the site tag line.
However, most themes list pages as the menu items by default if you do not edit the menus. The primary menu allows the Storefront theme to use more than one menu. You can switch between the menus you have created.
Steps to Move the Primary Menu in the Storefront Theme
If you want to move the navigation menu below or outside the header, you need to enter a few code lines. There is no need to create a new header.php file. All you need to do is add the code I will share in the functions.php file.
Here are the steps that you need to follow:
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to move the header’s primary menu.
- Add the following code to the function.php file:
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' );
Conclusion
In this post, you have seen how it is very easy to move the primary menu position. However, you need to redo all the menu styles, which might take a longer time. You also need to be careful when adding code to the functions.php file. This is because if you make an error, your site will crash. Now you know how to move the navigation menu outside of the header for the storefront theme. Additionally, if you are not comfortable with handling code, please contact a WordPress developer.
Similar Articles
- 30+Best WordPress Blogs Plugins for Successful Blogging
- 30+ Best WordPress Search Plugin to Improve Your Site Search & SEO
- 30+ Best Comment Plugin for WordPress to Boost Engagement
- How to Add Text after Price in WooCommerce » Add Price Suffix
- How to Move Price WooCommerce Storefront Hooks
- WooCommerce Storefront CSS Complete Customization Guide
- How to Add Storefront Theme Header Background Image
- How to Change Storefront Theme Tagline WooCommerce
- How to Setup WooCommerce Storefront Mega Menu
- How to Style WordPress Menu Items Separately WordPress Menu CSS Classes
- How to Get Started With Vue Storefront [ Beginner Guide ]
- How to Create Number Pagination in WordPress Without Using Plugin
- How to Remove Gravatar Storefront Blog WooCommerce
- How to Change Link Color in Storefront WooCommerce Theme
- How to Redirect On Refresh WordPress Page » Detect Page Refresh PHP
- How to Count Items Added to Cart WooCommerce Cart Count Code
- How to Redirect a WordPress Page Without Plugins?
- How to Make WooCommerce Storefront Header Transparent
- How to Create Custom Widget Area in WordPress Step by Step