How to Create a Split Mobile Menu in WordPress?

Key Takeaways

  • Nexter Blocks includes a Mobile Menu block that allows users to create a split mobile menu layout with two columns.
  • The ideal number of menu items for the split mobile menu is about five, ensuring a balanced design.
  • Users can customize the toggle button's appearance by enabling Extra Toggle in the Extra Toggle tab.
Table of Contents

Are you looking to add an app like a split mobile menu to your WordPress website? This innovative layout divides your menu items into two columns and includes a central toggle button. If your menu has only a few items, about five, this layout can be an ideal option for a mobile menu.

With the Mobile Menu block from the Nexter Blocks, you can easily make a split mobile menu on your WordPress website.

To check the complete feature overview documentation of the Nexter Blocks Mobile Menu block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

To do this, add the Mobile Menu block to the header template and follow the steps –

Note: To create the header template, you can use the free Nexter Builder. 

1. From the Style section, select Style 2

How to Create a Split Mobile Menu in WordPress?

From the Position section, you should select Fixed and Bottom from the Fixed Position section for a better look.

2. Then add the appropriate screen width in the Open Mobile Menu section so the menu is only visible on mobile.

3. In the Main Menu tab, keep a limited number of menu items like two items and edit the items as per your need. These menu items will be placed on the left side.

4. In the Right Menu tab, make sure to add the same number of menu items as in the Main Menu tab to keep the design balance. Then edit the items as per your need. These menu items will be placed on the right side.

5. Now go to the Extra Toggle tab and enable Extra Toggle. Now you’ll see a toggle button in the middle of the menu. Edit the item as per your requirement.

6. Finally, go to the Extra Options tab and select Columns from the Display section. This will make sure the menu items are equally spread across the screen.

Now you’ll have a beautiful split mobile menu, you can fine-tune the menu from the Style tab.

How to Create a Split Mobile Menu in WordPress?

     

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if the Mobile Menu block is not displaying correctly?

If the Mobile Menu block isn't displaying as expected, ensure that it is installed and activated as part of the Nexter Blocks. Check that you've set the screen width in the Open Mobile Menu section to a value appropriate for mobile devices. If the menu items are not appearing, verify that you have added the correct number of items in both the Main Menu and Right Menu tabs to maintain design balance.

Can I use a split mobile menu for a website with many menu items?

A split mobile menu is ideal for websites with around five menu items. If your site has more than that, consider simplifying the menu or using a different layout to avoid clutter. The split design works best when you can keep the left and right menu items balanced, typically with two items on each side for a clean look.

What are the best practices for styling the split mobile menu?

For optimal styling of the split mobile menu, select Style 2 from the Style section and ensure the menu is fixed at the bottom of the screen. This positioning enhances usability on mobile devices. Additionally, use the Extra Options tab to select Columns in the Display section, which helps evenly distribute menu items across the screen.

How can I create a header template for the split mobile menu?

To create a header template for your split mobile menu, use the free Nexter Builder. This tool allows you to add the Mobile Menu block to your header template easily. Following the steps outlined in the tutorial will help you customize the layout and functionality to suit your needs.

Last reviewed: April 14, 2026

Related Docs