The comfortable navigation on a site is vital. So, it is crucial to build a well-organized and easy-to-follow custom menu per page for the user. However, the website does not always need a uniform menu through all pages because each page has its own purpose. Want to create different conditional menus and set them to different pages on WordPress?
Ask us how. 😉
Table of Contents
- Best Plugins for Different Menu per Page
- How to Create and Set Up Different Menus
- The Bottom Line
Best Plugins for Different Menu per Page
Imagine, you have a one-page website. 📟 There you need a separate page with a contact form and chat bot or a relevant shop page. And it is impossible to implement them technically because they will just guide the users through the different sections on the landing page.
Let’s say, the visitors reached your shop page. It needs to have a particular menu in the header to display product categories, the information about shipping, add cart button, etc. Yet, you can face the same problem as in the previous case. Or you can see that the menu from the homepage duplicates on the shop page.
It will not work appropriately, right? I mean, each page has to have a relevant menu. Yet, it might be difficult to implement them on the different pages. Don’t panic, Crocoblock offers a bunch of solutions to fill this need. But before I tell you how to create conditional menus, let’s focus on the main tools that will help to set a custom menu per page.
Let’s start with JetBlocks. This plugin allows you to create specific headers and footers that fit perfectly for the needs of your website. With JetBlocks, it is super easy to add the necessary elements to a header and create a personalized menu: login forms, registration forms, search forms, and WooCommerce cart, nav menu, hamburger panels, and so on. Moreover, you can add and customize the website’s logo, insert authorization links, and other elements to create a stunning custom menu per page.
JetMenu is at your disposal for designing the mega menu. With the help of this plugin, you can create and customize every single item, add various items and badges, and customize them too. Besides, you can change menu item background, style menu typography, apply Hover mode, etc. I bet the possibilities of the JetMenu plugin are limitless. It is one of the best tools for creating conditional menus.
With JetThemeCore, you can create custom theme templates and templates for pages like 404. And, of course, create limitless headers and assign them for different pages. The process is intuitive and well-elaborated, so you don’t need some extra knowledge to write code or else. If you have the JetThemeCore plugin only, it will be enough to create a custom menu per page and add any specific content to it. At least, you can use the premade header and make some changes there.
How to Create and Set Up Different Menus
First and foremost, make sure that you have all the required plugins installed via the Crocoblock Dashboard. If you already know how to create headers, jump to the section with styling the menus and setting them to the different pages. Now, let’s get down to business. 🧑💼
Simple header with Mega Menu widgets
To add a header to your website, you need to go to Crocoblock — Theme Builder tab. There you will see the Theme Parts, where you will add the header. Click on the button Add New, select template type — header, and choose a name for it. You will be redirected to the Elementor page where the magic will begin.
Add a section and choose appropriate layout, for example, Content Widt — Boxed, set the parameters you need.
Mega Menu Widgets are worth your attention, if you want to create a custom menu per page that rocks.
Search for the Mega Menu Widgets in the elements panel. There are two available options — Vertical Mega Menu and simple Mega Menu; now, we will focus on the last one. After you drag the widget, you can see the settings tabs on the left sidebar.
Find Content, unfold General, and select a menu there. Choose between Menus Screen or go back to the WordPress dashboard — Appearance — Menus. Now select the menu that you want to work with or create a new one with the help of our guidelines. Once you build a menu, you will see it in the list of available menus in Elementor.
Don’t forget to put the menu both for Desktop and Mobile versions of your website to make sure it has a responsive design.
In the Style tab, you can customize your future menu — set alignments, change background, border type, or box shadow. Find the one that fits you best. Also, you can style the fonts and change hover and active states. If you have some submenu items, change it using the Desktop Menu Items settings tab.
To set this header to a certain location, go to the Header Settings in Elementor. This menu will help you to change the status of the header and set conditions where it will be shown through a drop-down menu — the entire website, singular, or archive page. For example, choose the entire site.
Mega Menu and JetMenu plugin
As we already know, JetMenu is special because it allows you to add any content to your conditional menus. Let’s make use of its limitless possibilities together.
In the WordPress panel — Appearance — Menus, find the menu you want to customize or create a new one. If you want to create a menu with some detalized submenus, you will need to add some more menus through the same WordPress Menus tab. So, for every category you have in the main menu, you need to create several different submenus.
On each menu item, find a JetMenu item, where you can play with the settings. Enable Mega submenu, and press Edit the Mega Menu Item Content to enrich your menu with other items and customize the elements.
On the Elementor page, choose a section with the necessary number of columns. Drag the Vertical Mega Menu widget to the first column, in the content tab on the left sidebar select the menu that you want to insert. Lastly, add those submenus that you’ve created in the WordPress admin panel. You can easily copy the widget and past it in the second section.
After this, you can use the Style tab and customize the elements, set the necessary width, height, typography, gap, etc.
In the main JetMenu settings, you can see Mega Menu position, add any icon to your menu (select from the premade ones or upload the .svg file), apply any text badge to the manu item, customize the menu size, etc.
To learn more about adding different content types to your Mega Menu, check out the detailed tutorial from our Knowledge Base.
Using Elementor, add a header above the menu (e.g, copy from the previous page), insert particular elements with JetBlocks widget, and update it.
Yet, we have a problem of setting this menu on another page. To deal with this, go to Crocoblock — Theme Builder again, create a new header template, copy the header or create a new one, select the Mega Menu you’ve just created in the General settings tab to show it, and add Breadcrumbs widget. In the Header settings — Conditions tab, select Singular and Front page to put the header you’ve created to your homepage and left the previously created header on the other pages of your website.
Let’s say, you have a separate page with contact form and want to give it a different header. Create a new template in Theme builder, copy the top part of the main header, and on this stage, add a Hamburger menu. 🍔
The essence is the same, you can add the existing menus, or jump to our previous sections in the article and create the new custom menu per page depending on your needs: simple menu or mega menu with variable elements. Change the position of the container, play with settings, style it, and so forth. Finally, set this particular header to the specific page, using the Singular option in Conditions tab and indicating the name of your Contact page.
You see? Easy as an apple pie.🥧
The Bottom Line
That’s it for the ways of creating conditional menus and setting them per different pages on WordPress. I gave just three of them, still, I am pretty sure there are some other methods of building a custom menu per page. If you have the one that differs from the variants I provided, share your experience with us in the comments section below. Let’s explore the endless possibilities of Crocoblock plugins together.