Making My Menu Responsive

To meet the requirements of the brief, I had to make my navigation system fully responsive using the @media screen and (max-width: npx) CSS function. To do this I controlled the column count, width, max-width and display properties.  Here is my navigation at full screen width:

When the screen reaches a width of 1006px, the triangle elements disappear using the display:none; function and the menu bar wraps in from the sides. The reason I did this was that the ribbon elements of the nav bar were fixed in place using absolute positioning, making it virtually impossible to scale and move them in a smooth and responsive way.

The next major break point for my navigation came at 720px (iPad portrait.) This collapsed the menu down into a drop-down format. The menu icon indicating a drop-down menu also became visible.

In order to have the contents of the menu slide down over the rest of the page, the nav element was assigned a z-index of 9999 (just to be sure!)