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 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.
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.
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
It is possible to change the styling on your mega menu within the Additional CSS field in your theme. However, as all of our themes are designed with website and ecommerce best practices in mind, we only recommend editing these if you are confident that the changes you make won't affect SEO or customer experience, and you are proficient in editing CSS.
Try Bluepark for FREE for 14 days
Full access to everything including our support team, no card details required