InMotion Hosting Support Center

In This Tutorial:

Creating Menus can help to organize and efficiently present website content, making it easier for your visitors to enjoy. A menu is simply a compilation of items (like links, pages, blog posts, etc.). Using BoldGrid you can customize your menus by adding the various items you want to it. The Customizer also allows you to arrange the menu items to create a unique menu layout. In this guide, we will explain how to create drop-down menus using the BoldGrid customizer.

Create a Simple Drop-down Menu

Since there are various menu items that can be created to make a menu, there are multiple methods to manipulate the menu's structure to suit your visitors' needs. The most simple technique is to nest common menu items (in this case, Pages), to conserve space in your menu. Nesting is a method for manipulating various components to create a more intuitive unified structure. Consider a bird's nest, comprised of sticks, leaves, bark, and mud, strategically arranged to produce a single, secure structure. The instructions below will guide you through the process of nesting Pages to design a drop-down menu.

  1. BoldGrid log in screen, username and password fields and Login button highlighted.

    Log into your BoldGrid Administrative Dashboard.

  2. Customize menu option highlighted.

    Click on the Customize menu option from the left-side menu.

  3. Customizer Menus option highlighted.

    From the Customizer menu, click on Menus.

  4. Customizer Menus Primary Navigation selection.

    Select the menu you would like to create a drop-down menu with, from the list of menus you have created.

  5. Drag and drop the pages (that you would like displayed in the drop-down) below your desired top menu item page.

    Before After
    Primary Navigation menu before. Primary Navigation menu after.
  6. Customizer Menus Publish button highlighted.

    Click the Publish button to save the menu.


  7. The table below, provides a before and after example of our simple drop-down menu.

    Before After
    Primary Navigation Active menu appearance before. Primary Navigation Active menu appearance after.

Create a Mobile Friendly Drop-down Menu

By default, the drop-down menu will appear after you hover over the top menu item. However, your users may be using a mobile device, that requires them to click the top menu item in order for the drop-down menu to appear. In this case, it is best to use an alternative menu item as the top menu item. The instructions below will describe the steps for how to create a drop-down menu with a Custom Link top menu item to accommodate visitors using mobile devices.

  1. BoldGrid log in screen, username and password fields and Login button highlighted.

    Log into your BoldGrid Administrative Dashboard.

  2. Customize menu option highlighted.

    Click on the Customize menu option from the left-side menu.

  3. Customizer Menus option highlighted.

    From the Customizer menu, click on Menus.

  4. Customizer Menus Primary Navigation-staging selection highlighted.

    Select the menu you would like to create a drop-down menu with, from the list of menus you have created.

  5. Primary Navigation-staging menu Add Items button highlighted.

    Click the Add Items button.

  6. Add Items Custom Links selection highlighted.

    Click on Custom Links from the list of menu items.

  7. Add Items Custom Links URL field contains https://www.example.com and is highlighted.

    Fill in the URL field with any link, for example: "https://www.example.com"

  8. Add Items Custom Links Link Text field contains Company Information and is highlighted.

    Fill in the Link Text field with the text you would like to appear as the top menu item, for example: "Company Information"

  9. Add Items Custom Links Add to Menu button highlighted.

    Click the Add to Menu button to add the Custom Link menu item to your menu.

  10. Company Information Custom Links item highlighted.

    Click on the Custom Link menu item to edit it.

  11. Edit Custom Link URL field empty and highlighted.

    Delete the link you entered from the URL field.

  12. Drag and drop the menu item(s) you want to appear in your drop-down menu.

    Before After
    Primary Navigation-staging menu before. Primary Navigation-staging menu after.
  13. Customizer Menus Primary Navigation-staging Publish button highlighted.

    Click Publish to save your changes.


  14. The table below, provides a before and after example of our mobile friendly drop-down menu.

    Before After
    Primary Navigation-staging menu appearance before. Primary Navigation-staging menu appearance after.

Create a Drop-down Menu within a Drop-down Menu

As you begin to familiarize yourself with drop-down menus and how to organizing your content, you may find the need to use more complex structures to create your menus. The following instructions will guide you through the process of nesting a drop-down menu within another drop-down menu.

  1. BoldGrid log in screen, username and password fields and Login button highlighted.

    Log into your BoldGrid Administrative Dashboard.

  2. Customize menu option highlighted.

    Click on the Customize menu option from the left-side menu.

  3. Customizer Menus option highlighted.

    From the Customizer menu, click on Menus.

  4. Customizer Menus Primary Navigation selection.

    Select the menu you would like to create a drop-down menu with, from the list of menus you have created.

  5. Drag and drop the menu items you want to appear under each Custom Link. In our example, we use the Company Information and Who We Serve as the top menu item for each drop-down menu we are creating. See the example images below for a visual comparison.

    Before After
    Primary Navigation Top Level drop-down menu before. Primary Navigation Top Level drop-down menu after.
  6. Now, drag and drop one of the Custom Link menu item under your desired Top Level drop-down menu items, where you would like the nested drop-down menu to appear.

    Before After
    Primary Navigation nested drop-down menu before. Primary Navigation nested drop-down menu after.
  7. Customizer Menus Publish button highlighted.

    Click the Publish button to save your changes.


  8. The table below, provides a before and after example of our nested drop-down menu.

    Before After
    Primary Navigation nested menu appearance before. Primary Navigation nested menu appearance after.


Congratulations! Now that you are familiar with making menus using BoldGrid, you can begin to create captivating menus to engage your visitors.

Was this article helpful?
Continued Education in Course BoldGrid
You are viewing Section 5: How to Create Drop-down Menus Using BoldGrid
Section 4: Fixing BoldGrid Backup Email Notification Problems

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!