If you are wanting to add multiple menus created by Menu Builder to the same page, there are a few changes that need to be adjusted so that both menus function correctly. Note, these changes only need to be made if two or more menus are going to appear on the same page. If you are just adding a single menu to the page, you do not need to follow these steps.

Step 1:

Follow the export process for both menus, adding them to your desired HTML webpage.

Step 2:

Locate the markup that you pasted into the <body> for the first navigation menu and find <ul id="mainmenu"> . Change id="mainmenu" to id=”mymainmenu”.

 

There are two mainmenu IDs on my page, which one do I change?

Each menu uses the same div id called mainmenu. You only need to make this change to the first menu on the page.

Step 3:

Next, change <button class="nav-button button bar"> to <button class="navone-button button bar">

Step 4:

Open the mb.js file which is located in the js folder that is associated with the first menu and locate all references to the text #mainmenu. Now replace that with the text #mymainmenu. Make sure to replace ALL instances.

Step 5:

Open the menu_builder.css file which is located in the css folder that is associated with the first menu and locate all references to the text #mainmenu. Now replace that with the text #mymainmenu. Make sure to replace ALL instances.

Step 6:

Open style.css file which is located in the css folder that is associated with the first menu and locate all references to the text #mainmenu. Now replace that with the text #mymainmenu. Make sure to replace ALL instances.

Now that we have the ID out of the way, we need to replace a class.

Step 7:

Open each of the following files associated with the first menu and do a find and replace for all instances of .nav-button replacing it with .navone-button.

  • menu_builder.css- located in the css folder that is associated with the first menu.
  • style.css- located in the css folder that is associated with the first menu.
  • mb.js- located in the js folder that is associated with the first menu.

Once this is completed upload your project and your menus should function perfectly.

 

These instructions are only provided as a temporary fix to the problem with Menu Builder 1.0. Version 1.5 has addressed this problem.