Enhance Your Website with BricksPlus: Mega Menu Templates and Tutorial

By BricksPlus

Step - 01

Create a menu

To start building a Mega menu, let’s begin by creating a menu from the Dashboard’s Appearance section, Dashboard > Appearance > Menu.

Assign a name for your menu, and proceed to create custom links for your menu Items.

Step -02

Create a mega menu template

Now, let’s construct our Mega menu template by accessing the Templates section.

Next, follow these steps –

  1. Provide a suitable title for your Template.

  2. Choose the template type as “Section”.

  3. Publish your Template.

  4. Click on “EDIT WITH BRICKS” to begin customizing it.

Now, construct your Mega menu section according to your desired layout and components. Once you’re satisfied, remember to save your changes.

Step -03

Connect mega menu template with menu item

Now, return to the Appearance section and navigate to Menu (Appearance > Menu > Your Menu). Locate your desired menu item where you wish to set the Mega menu. In the “Mega menu (Bricks template)” option, select your created Mega menu. By doing so, your Mega menu will be assigned to that specific menu option.

Step -04

Design/Build Header Template

Next, access the Templates section and proceed to create a Header template.

Once created, click on “Edit with BRICKS” to customize the template according to your preferences.

Give a title > Select template type “ Header” > Publish > Edit with BRICKS.

Within the Editor:

  1. Add a Section.

  2. Place a logo and Nav Menu elements side by side, aligning them horizontally.

  3. Select your Menu from the “Menu (WordPress)” option.

  4. Proceed to customize and edit your Menu Items as desired.

5. Now, navigate to the MEGA MENU option and activate or enable it.

Choose the “Toggle on – Click” option and configure the Transition and Transform settings based on your design requirements. Once done, remember to save your changes.

Your Mega Menu is now ready to go. Simply click on the designated menu option, and your Menu will appear.
To enhance responsive visibility, adjust the Mobile Menu Width to 100% from the Nav Menu settings.
Thank You.

NB:Each step is explained with screenshots and details