course header 2000x350

A Mega Menu is a horizontal menu with a full width drop down menu that is ideal for displaying a large number of menu items in columns to help visitors more quickly navigate to pages on your website. Here is the link to download the Moodle Mega Menu plugin:

https://moodle.org/plugins/local_megamenu

After installing this plugin, new menu items will be added to the Plugins, Local Plugins page:

01

Click on Manage Menus. Then click Create Menu:

02

The Name of the menu will not be displayed in the Moodle Top Navigation bar, but the drop down label will be displayed. So keep the drop down label short like View Courses. Then use the search box to add your course categories:

03

Then click Save Changes. The new Top Level Menu Item called View Courses is now in the upper right corner near the log in link:

04

Click on View Courses to open the Mega Menu Drop Down:

05

This is a nice display of your course Categories with the actual courses shown below the categories. Clicking on the course brings up the website log in page.

Delete competing top level menu items

Unfortunately, the Moodle Top Menu is not really responsive. On narrower screens, with several menu items in the top menu, the mega menu top level menu item is hidden. Therefore to help the Mega Menu appear on narrower screens, we need to remove some of the other top level menu items. We can delete the Moodle community, English and Teaching forum links because all of these are now in our Moodle Side Menu.

Go to Site Administration, Appearance, Theme Settings. Then delete everything in the Custom Menu Items box. Then click Save changes. Here is the result on the top of the Home page when not logged in:

06

Here is the drop down menu on a narrow screen:

07

Add Feature Boxes

Feature boxes are small boxes of content that draw your website visitors attention to special features about your website. These boxes are often used to provide a link to special pages on your website. We will add three feature boxes to the top of the Home page as examples. These pages and links are:

Meet Your Teacher

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Better Word Processing

https://collegeintheclouds.com/course/view.php?id=2

Contact Us

https://collegeintheclouds.com/mod/page/view.php?id=5

Create three feature boxes
Log into your Home page and click Turn on Editing. This displays Add a Block. Click HTML to add an HTML block. Type in a Title, Text, image and CLICK HERE link. Reduce the image width to no more than 100 pixels and change the alignment to Middle.

08

Then click Save image.

09

Then select the text CLICK HERE and click on the link icon in the text editor.

10

Copy paste the link in the URL box. Then check Open in a new window. Then click Create link. Then click Where this block appears and change the location from Column C to Column A. Also change On this page to Column A. Then click Save Changes.

11

Then click Add again to add a second HTML block. Click Configure. For title call it Learn Better Word Processing. Give it a description and add an image and a CLICK HERE link. Place it in Column B. Then click Save changes.

12

Then click Add again to add a third HTML block. Click Configure. For title call it Contact Us. Give it a description and add an image and a CLICK HERE link. Place it in Column C. Then click Save changes. Then turn off editing. Here is what the top of our Home page now looks like to a non-logged in visitor:

13

What’s Next?
In our next article, we will look at another way to direct viewers towards special pages on your website - adding a slideshow to your Home page with links to pages your views may want to read.