When it comes to responsive web design, it is important to implement it properly for the whole site, including the navigation bar. When on a large desktop display, this bar can afford to be a simple row of links with visual styling. However, as displays start to decrease in size it is important for it to make appropriate use of the available screen real estate.

There are multiple ways of doing this, of varying degrees of complexity. For my current channel project, I felt it was important to choose the right method of implementation for the navigation, so here I will discuss a few of them and my final decision.

The first and perhaps the easiest method is to simply center the navigation and let the navigation bar links overflow onto new lines as necessary using simple CSS. This is largely the approach I took for my personal website, although there I also moved the logo around the navigation at certain widths using media queries. This method is simple yet effective, and quick to implement. However, it can lead to a certain ‘jumbled’ aesthetic as the links may not be aligned, and it may not look very professional.

Personal portfolio menu at small screen width

The menu of my portfolio – at certain widths this approach can look a little odd.

Another similar approach that somewhat solves this issue, is to use media queries to make all of the navigation links the same width and height below a certain size, and then have them overflow as before. This creates more of a grid, with uniform cell sizes. For example, each link could be set to a half or a third of the viewport width to create two or three columns of links respectively. This creates a more professional look.

Yet another possible implementation of the menu is in a dropdown selection box. This has the advantage of being expandable and scrollable, and so being able to fit in large menus with possible sub-menus on the page without it constantly using the majority of the vertical space on the screen. It also may be familiar to many of the website’s users, as many applications use such selection items.

There are other variations that also expand out when clicked so as to not be constantly using screen space, which I feel is an important aspect. One of these is to have the menu off the side of the screen, and then have it slide in at the touch of a button.  This however has the disadvantage of using the entire vertical length of the screen when expanded.

The final option I will touch on, and the option I have implemented in the channel project website, is to restyle the menu into a simple vertical list under a certain screen width using CSS media queries, and then hide it. Then, using javascript a button is set to display and hide the menu on click. When the screen is resized back over the threshold width, the menu is reverted back to a horizontal row. I feel that this option works well in this context, as it is simple and easy to understand, and it uses a minimal amount of space on the page whilst still being easy to click/tap accurately.

Non expanded mobile friendly menu button

The non-expanded menu at small screen widths.

Expanded mobile friendly menu

The expanded menu, upon click of the menu icon.