Designing and prototyping the main website header area

Building a static website: part 12

Main illustrative blog post header image.

Published and updated date of webpage. 18-FEB-2026

Table of Contents
  1. Design considerations for the top-level navigation
  2. Website subject category descriptions
  3. Conclusions and design decisions

For many of the previous blog posts, I have included a basic "header area", that includes some navigation links. In this blog post, I want to explore the design of the header area that could be used as a basis for the final website. The idea is that it will include such things as navigation links that are much closer to how they should finally appear and include some kind of basic site logo, amongst other things.

Essentially, this is the area of a webpage that would remain consistent across whatever webpages were being written and could be subsequently updated if changes needed to be made in the future. Eventually, such a header/navigation area would be separate from the main article being written, but for now, it's included directly within this blog post. Note that I am continuing to include the existing navigation for this series of blog posts, below the new global navigation area.

1. Design considerations for the top-level navigation

There are of course plenty of ways to design the overall navigation for a website and the pages within it, but a very common one is to have a top level header area that includes links to the various different sections on the website. This is exactly the kind of thing that I have in mind for my own website. The final (for now) design that I came up with can be seen at the top of this blog post. Here, I want to talk about some of the things I considered when coming up with this design.

I think that there are three main areas to consider:

  1. General high-level requirements.
  2. The visual design of the header and navigation area.
  3. What HTML and CSS is required to implement our requirements.

1.1 General high-level requirements

As far as this is concerned, I have a few things in mind:

At this point, it might be worth clarifying what I mean when I talk about including the header and navigation area separately from the main article.

When I write an article (such as this blog post), I do so by writing the contents that I want to publish in a plain text file, using a format of my own design, which shares are some similarities to Markdown and AsciiDoc. Once that is done, I then generate an HTML file, which is uploaded to the web server. I will likely talk more about this process in a future blog post.

My plan with the header and navigation area is that during that HTML generation process, it would be included, likely from a separate file and added it to the generated output, thereby separating the main contents of the article from the navigation. This is in contrast to the "local" navigation for this blog post series, which is included directly within the source text file.

1.2 The visual design of the header and navigation area

I am certainly no accomplished graphics designer, so my approach is to consider what kind of website I am trying to put together and then be inspired by the general visual design of similar websites, alongside some tutorials that show navigation bars being implemented. Therefore, it is worth starting by exploring what kind of content and articles I have in mind for the eventual finished website, which can then guide my requirements.

Perhaps the first thing to say is that, given that this website is currently a "one man band" and is quite likely to remain exactly that way, I'm never going to be in the position to author hundreds of articles. What I think this means is that I can avoid the complexity of the design that you might see in major news websites for example. I just don't have that many subjects to consider.

In terms of subjects that I do intend to cover, these can be divided into a few fairly arbitrary categories, which I intend to include in the launch of this website. At the time of writing, I intend that to include the following:

I might change my mind and include/exclude others, but that will require some further thought and my requirement of being able to include the header area HTML separately from the main content of each article means that I can update the categories as necessary.

What this means is that I likely don't have a great deal of work to do to make the navigation area work reasonably well on narrow devices. Once again, if that turns out not to be the case in the future, it won't be so difficult to change.

What this leads to from a visual design point of view is:

The following represents a mockup of what the header area/global navigation will look like. This of course is representative of the design for wider screens.

A prototype of the top header area and global navigation.

1.3 What HTML and CSS is required to implement our requirements

We now come to considering what HTML and CSS is required to bring this header and navigation area to life.

The HTML is straightforward. The main links are expressed as an unordered list. Those navigation links (and the accompanying homepage icon) are contained within <header> and <nav> HTML elements. These are semantic HTML tags and also allow for the styling that is necessary.

The URLs in this blog post link to sections that have a quick summary of what will be covered within the different categories, whereas the final version of the HTML that will be used site wide, will link to index pages in the appropriate directories. Apart from anything else, I'm not in a position to create those directories and accompanying index pages at the time of writing.

Note that it might also be worth mentioning that I'm still debating whether to use relative URLs in the final HTML, or root relative URLs in the final HTML that will be included site wide. Both have potential advantages and disadvantages.

To give an example of what I mean, consider the following HTML, which currently specifies the URL for the main home page as ../../index.html. This is of course a relative URL. It could be written instead as /index.html, which is the root relative alternative.

<header class="top">

<nav class="global">

<a href="../../index.html"><img src="icons/main_logo_small_circle_ink.svg" alt="Homepage."></a>

<ul>
   <li><a href="#c_2.1">Blog</a></li>
   <li><a href="#c_2.2">Linux</a></li>
   <li><a href="#c_2.3">Tech</a></li>
   <li><a href="#c_2.4">Cookery</a></li>
   <li><a href="#c_2.5">DIY</a></li>
</ul>

</nav>

</header>

The relevant CSS is as follows:

body
{
   color: black;
   font-family: "Noto Sans", "Oxygen-Sans", Ubuntu, Roboto, Helvetica, Arial, sans-serif;
   max-width: 1000px;
}

The <body> styles just set the scene. I'm defining a number of fonts, but that's not particularly relevant, although I want a sans serif to be used. More important is that the maximum width of the page is set at 1000 pixels, which is a typical kind of width setting.

/*
 * CSS for the global header/navigation area at the top of the page.
 */
header.top
{
   display: flex;
   align-items: center;
   background-color: lightgrey;
   height: 100px;
}

The <head> styles define a flex container, where we use align-items: center;, to centre align the navigation links vertically within it. The background colour is set to a light grey, just to make it slightly more visible, although I am likely to use a white background (or just transparent) eventually. Finally, we set the height to 100 pixels, which gives us plenty of room.

nav.global
{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: black;
   height: 40px;
   width: 100%; /* Stretch to full width of the header area. */
}

The above defines another flex container, which encloses both the homepage icon and the group of navigation links.

nav.global ul
{
   list-style-type: none;
   text-transform: uppercase;
   margin: 0;
   padding: 0;
}

nav.global li
{
   display: inline;
   margin-inline-end: 20px;
}

The above definitions set the various styles for the unordered list that makes up the navigation links. Note that I decided to use CSS to display those links in uppercase.

nav.global img
{
   margin-inline-start: 20px;
   height: 60px;
}

nav.global a
{
   text-decoration: none;
   color: white;
}

nav.global li a:hover
{
   color: green;
}

The final definitions above set of necessary values, such as setting a margin for the homepage logo, so it is moved away from the left-hand side of the page. Also, when the user hovers over one of the links with a mouse or equivalent, we set the font colour to green.

Naturally, as always with CSS styling, this can be altered at some point in the future, but this seems to be a good starting place.

An advantage that we get from having a relatively straightforward navigation area, with only a few subject categories is that by using flexbox, we seem to get a reasonable experience "for free", when it comes to the appearance on narrower screens, such as mobile devices. If you are reading this on such a device, that will hopefully the obvious, while if you are viewing this on a desktop browser, try making the window narrower, to see the default behaviour.

If necessary, I can make further alterations in the future, both because the CSS can be changed and secondly, because of how I intend to include the relevant HTML into a page when the HTML is being generated.

2. Website subject category descriptions

As the design of the top level header and navigation area has introduced the list of categories that I intend to eventually cover, I thought it might be worthwhile giving a brief description of what kind of things would be included within those categories. This also gives a link target for the navigation links at the top of the page, which otherwise might not lead anywhere, because they haven't been properly created yet.

2.1 Blog

The very page you are reading at the moment is of course an example of a blog post entry, albeit one that is relatively different from the kind of thing that I will eventually be writing in this category. A typical blog post might be a subject that doesn't particularly fit in the other categories, or perhaps something that might be continuously updated. For example, news related articles.

2.2 Linux

This is a catchall category that will include articles about Linux and FOSS (Free and Open Source Software) and related topics. That could include tutorials, software reviews and even a bit of hardware coverage, as long as it has a strong relation to free software.

2.3 Tech (technology)

This is a wide category, covering articles that would mainly be about nonfree software and other related topics, again including items such as reviews and tutorials.

2.4 Cookery

I am no chef, but this will include recipes that I like to cook, alongside other advice and coverage of things like cooking equipment.

2.5 DIY

My adventures (and misadventures) with DIY.

3. Conclusions and design decisions

I think the main conclusion of this blog post is that we can come up with a relatively straightforward design for a global navigation and header area that can be used across a wide range of devices. The design decisions I have explained in detail earlier in the article.

I haven't yet decided what the next blog post is going to be about, but keep an eye out.