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.
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.