How to create and style a mega menu

10 CommentsThursday, 28 February 2013  |  Cate

Skill Level: Intermediate - Advanced

If you have a lot of categories and sub-categories it is likely that you want to implement a mega menu as seen on most ecommerce sites.  A mega menu can help customers navigate to certain areas of your site quicker and easier than a left hand menu, with the added bonus of it being hidden away when not in use and not taking up prime selling space.

Creating your mega menu

Creating a mega menu in Bluepark is quite straight forward as long as you have your category tree already set up in the Category Manager.  Once this has been completed go to Design > Navigation Manager and click on the Create New Create New icon icon.  Add in your Link Title exactly as you want it to appear on the website for the first link on your Navigation Bar.  In the Link to drop-down, select the top-level category you want to link to and tick the List sub-categories below option.  This will then give you a drop-down menu from your navigation bar of all the sub-categories for that top-level category.

If you have a large number of sub-categories, you will probably need separate the links into columns to ensure customers can view all of them. To automate column breaks, simply add in the number of links you want to display in a column into the Maximum Lines field.

Navigation Editor

You can also add in links to static pages or even external links, such as an external blog. Just select the relevant page in the Link to drop-down for a static page or add in the full URL into the Web address (URL) field for an external link.

Creating a non-standard navigation structure

If you don't want to just replicate your category structure in the mega menu you will need to create your navigation structure manually.  To do this you need to initially create your heading link without ticking the List sub-categories below option.  Once this is created you need to click on the Create Sub-link icon to the right of heading link in the Navigation Manager to create any sub-links. 

Create Mega Menu Sub-link

If you have a large number of sub-links to add in it can help to place the links into columns so that the drop-down doesn't go too far down the page.  You can do this by clicking on the Create Sub-link icon and ticking just the Column Divider Only option before saving.  You will need to reorder the sub-links so that the column dividers sit in the correct place as the mega menu will appear on the website in the exact order you have set it within the Navigation Manager.

Tip: The Navigation Manager can end up looking rather complex as you create your structure so it is best to use the drop-downs at the top of the page to only show the section you are working on. All parents will show everything. No children will show the top level links without the sub-links below. Underneath this will be listed the top level links which you can select individually to show just the sub-links below.

Styling your mega menu

The top navigation bar (the bar that the mega menu drops down from) is styled within the Design > Template Manager > Advanced Editor > Bars > Navigation.  In here you can set things like bar height, background colour, and link colour and style. 

The mega menu itself is styled within the Additional CSS field in the Pages tab of the Template Editor.  To start editing this click on the Edit button next to this field and a new window will open up where you will see a collection of CSS code.  Don't let this put you off! 

The section you will need to edit will be titled Navigation Sub-Menus or Navigation Drop-Down, depending on the template. It will look similar to the code shown below, which is the code in the Bluepark Glass template.

.child { position: absolute; visibility: hidden; z-index: 40; background: #F0F0F0; border: 1px solid #004080; margin-top: -1px; padding: 2px; text-align: left; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); }
.child a, .childheading { display: block; padding: 5px 8px; border-radius: 2px; }
.child a:link, .child a:visited { background-color: transparent; color: #606060; font: bold 12px arial, sans-serif; text-decoration: none; }
.child a:hover, .child a:active, .childheading { background-color: #D0D0D0; color: #404040; font: bold 12px arial, sans-serif; text-decoration: none; }

To change the drop-down background colour

On the .child line change the HEX value within the code background: #F0F0F0; to the colour you want your background to appear as. You can find out the HEX value of a colour online or via a graphics software package such as PhotoShop.

Mega menu background

To change the drop-down border

On the .child line change the HEX value within the code border: 1px solid #004080; to be the colour you want. To increase the width of the border, change 1px to a different value. To change the style of the border, replace solid with a different style such as dotted or dashed.

Mega menu border

To change the drop-down position

On the .child line change the pixels value within the code margin-top: -1px; to change how far the mega menu sits away from the top navigation bar.

To change the drop-down corners

On the .child line change the code border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; to border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; to have pointed corners rather than curved.

Mega menu corners

To change the link hover and heading link corners

On the .child a, .childheading line change the pixel value within the code border-radius: 2px; to 0px; to have pointed corners rather than curved on the heading link and hover link backgrounds.

Mega menu heading corners

To change the link font and colour

On the .child a:link, .child a:visited line change the HEX value within the code color: #606060; font: bold 12px arial, sans-serif; to the required colour. You can also change the font settings of the weight, size and family to whatever you want.

Mega menu links

To change the link hover and heading link background colour

On the .child a:hover, .child a:active, .childheading line change the HEX value within the code background-color: #D0D0D0; to the required colour for the background of both the link hover and the heading link.

Mega menu heading link background

To change the link hover and heading link font and colour

On the .child a:hover, .child a:active, .childheading line change the font settings within the code color: #404040; font: bold 12px arial, sans-serif; to be the colour, font weight, font size and font family you want both the link hover and the heading link to be.

Mega menu heading font

Advanced changes

There are lots of other styling changes you can make to the mega menu CSS code but these are much more advanced and are not recommended unless you are confident you know what you are doing. The styling changes above should be enough to customise any mega menu to your branding colours and design.

Denis Reid
Saturday, 6 August 2016  |  19:00

I've set up the mega menu categories, but all of the sub categories are listing BELOW one another, not side by side as in your example. How do I get the Men Women etc to go beside each other?

Tuesday, 9 August 2016  |  9:56

Hi Denis,
In the Navigation Manager, click on the plus sign next to the Heading you want to do this on. In the Navigation Editor that opens, tick the Active and Column Divider Only boxes and save. This will create a Column Divider. Go back to the Navigation Manager and move this divider to just before the second section. So, in our example this would be just before the Men link. Repeat this for each divider you need.

Daniela Necsulescu
Thursday, 20 February 2020  |  20:24

I tried to find this option to get more column divider but when I pressed + there is no option for column divider only. Can you advise me how to create more column divider in my Catalogue menu. Thanks

Friday, 21 February 2020  |  9:25

Hi Daniela, I've replied to your email about this.

Tuesday, 9 August 2016  |  12:20

This is great, however how do I get my mega menu to span across the width of the page? I have a BABY heading with a lot of catergories under it, (baby grows, jumpers, skirts etc) as it is my drop down goes directly down, I'd like the catergories to span across the full width so it is less invasive on my page.

Tuesday, 9 August 2016  |  13:04

It sounds as if you've ticked the option 'list sub-categories below'. This will just create a long list. To be able to structure it how you wish, with column dividers in between, you will need to remove this option and create the sub-links manually. Have a read of the section at the top of this post under the heading 'Creating a non-standard navigation structure'. This explains how to do it. Also, make sure you tick the Full-Width option to make the drop-down sit right across the page.

Tuesday, 9 August 2016  |  15:16

THANK YOU!!! Forgot to ask in the previous question, can you add images to the mega menu (it would be placed at the far right, or last column) Thank :)

Tuesday, 9 August 2016  |  15:58

The easiest way to do this is to create a new block in the Block Manager and add the image you want to display in one of the drop-downs. Make a note of the block variable - something like .
Then in the Navigation Manager create a column divider at the end of your sub-links and then add in a further new sub-link. In the Link Title field paste the block variable and save. This will now appear at the right side of the drop-down.
You may need to fiddle around with the image to get it to sit in the right place. This can be achieved by adding white space to the image in Photoshop and re-uploading it to the block.

Bob Whiting
Friday, 9 March 2018  |  15:10

I am having a problem with my mega menu, when you the ones on the right of the navigation bar the drop down goes off the page. How can I stop this from happening

Friday, 9 March 2018  |  15:24

Hi Bob,

I have added in a small piece of styling code to force the Bass Guitars drop-down to float to the edge of the navigation bar to stop this from happening.

Try Bluepark for FREE for 14 days

Full access to everything including our support team, no card details required