Working within the parameters of the menu

The menu bar is your main navigation tool. It's the middleman between the home page and everything else on your website, so it's pretty important. 

By default your page names ("Home", "Contact", "About" etc) are centered in a menu that's the same width as the header section (1170px wide). However, you can expand this to be the full width of your website. 

It's best to keep it simple when designing the menu - the less pages you have showing in the menu bar, the better. A cluttered menu can overwhelm your site's visitors with too many options. Instead, try and group the pages relevant to one another and sit them under a parent page (e.g. "Registrations" may be the parent to "Junior Registrations", "Senior Registrations", and "Coach Registrations").

Transparent menus

Use a transparent menu when you have a simple background with an adequate amount of plain space at the top of the page. In the example below, the black part of the background at the top of the page is dominant, so will allow for the menu's text to still be legible. You can achieve this effect by using white text and setting the menu's background colour to be 100% transparent. 

Solid colour menus

If you'd rather use a solid colour background in your menu bar try using a contrasting colour, or a secondary colour used in your school or club colours. 

For example, Northcote College's colours are yellow and royal blue, as seen below. Since the dominant colour in the background is royal blue (in their uniform) we have chosen to use their secondary colour of yellow as the main colour in the header, with royal blue as the text colour. This helps the colour balance in your website remain consistent and even. Of course, this is not always the rule as design can be subjective.

Using a logo in the menu

Using a logo in the menu bar is recommended if you are not using a header. This will ensure that anyone visiting your site will instantly know who it belongs to. Remember to have a clear logo with no jagged or pixelated edges. The logo's file type is important too - both JPEG's and PNG's are accepted, however PNG's are more commonly used because of their ability to maintain a transparent background. Transparent PNG's are usually created in image manipulation software such as Photoshop.

The below comparison illustrates the difference in logo types and how they can compromise the look of your menu.​​​​​​​​​​​​​​

JPEG file used (.jpg or .jpeg) 
​​​​​​​Notice the white background - this is because JPEG files cannot store transparency.

PNG file used (.png)
In contrast to the above example, here there is no white background as the PNG file recognises transparency, allowing the colour of the menu to show through. 

Adding a mega menu to your website​​​​​​​

A Mega Menu is an extension of your site's menu, and will display a large panel of content below a menu item when the user clicks or hovers over that menu item. A mega menu provides a better user interface when you have many sub-menu items, as it will reveal all lower-level pages at a glance.