Coders' Guidebook

How to build a navigation bar for your website

Navigation bars are a simple yet effective way of helping users navigate around your website.

navbar.PNG

HTML code for the navigation bar

The links and items in your navigation bar will be written in HTML the top of the body element of each web page. Begin by writing opening (<div>) and closing (</div>) division tags. Assign the opening <div> tag the class "navbar" so you can easily style all the contents of the navigation bar:

<body>
	<div class="navbar">
	</div>
</body>

Add the content of our navigation bar between the opening and closing div tags. Each link in the navigation bar should get its own line and will be created as described previously. For example, in our imaginary website "www.treesandtrees.com", a navigation bar linking to Home, About and Types of Trees pages would look like this:

<body>
<div class="navbar">
	<a href="http://treesandtrees.com">Home</a>
	<a href="http://treesandtrees.com/About/">About</a>
	<a href="http://treesandtrees.com/TreeTypes/">Types of Trees</a>
</div>
</body>

CSS code for the navigation bar

We now technically have a functioning navigation bar; however, it does not look very appealing. You can style the navigation bar by calling the navbar class in your 'main.css' stylesheet as follows:

.navbar {
	font-family: Helvetica, Times New Roman;
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	background-color: White;
	border: 2px solid White;
	box-shadow: 0px 2px 2px Gainsboro;
	z-index: 20;
	overflow: hidden;
}

The above code also includes some example CSS properties you might like to consider when styling the navigation bar. Here is what each property represents:

  • font-family - Specify what font you want the text in the navigation bar to be as well as any back-up fonts in case a web browser does not support your first choice. List your fonts in order of descending preference. You can view our separate tutorial on font styles here
  • width - Setting the width to 100% ensures the navigation bar will span the width of the parent element. In this case, the parent element is the body and so the navigation bar will span the full width of the webpage.
  • height - We specify a height to ensure the navigation bar will never be too large. The 'height' property can also help resolve a potential issue which sees the navigation bar obstruct some of the elements that come next in the HTML document e.g. logos (more on overcoming this issue at the end of this tutorial).
  • position - Determines how the navigation bar will place itself as you scroll through the page. Unless stated otherwise, the position will be static and the navigation bar will disappear when the user scrolls down the webpage. If you want the navigation bar to remain at the top of the page as the user scrolls then you should set the position to 'fixed'.
  • top - Setting the 'top' property to 0 means the distance between the navigation bar and the top of the webpage will be zero. When combined with a fixed 'position' attribute, the two properties ensure the navigation bar remains at the top of the screen. If you wanted your navigation bar to be fixed at the bottom of the screen, then you would use 'bottom: 0;' instead of 'top: 0;'.
  • background-color - This property determines what colour the navigation bar will be.
  • border - We can define three aspects of the border: width, style and colour. In the above example, we have selected a solid white border which is 2 pixels wide. You can style the border to suit your needs. For instance, you may opt for a dashed or dotted border instead of solid.
  • box-shadow - The property adds a shadow effect to the navigation bar. In the above example, the top shadow is set to 0px and the left, right and bottom parts of the shadow are set 2px and Gainsboro colour (for help on choosing colours then see our colour picker and table).
  • z-index - The z-index determines how the element will stack with other elements. The element with the highest z-index will be displayed at the forefront (i.e. on top of other elements), while elements with lower (or even negative) z-indices will be positioned behind elements with greater z-indices. If you have a fixed navigation bar, you will likely want it to have a high z-index because otherwise it could become obscured as the user scrolls down the webpage.
  • overflow - Setting the 'overflow' property to 'hidden' hides any content that overflows from the navigation bar.

Next up we want to look at styling the links in our navigation bar. To do this we must create another entry in our stylesheet for .navbar, only this time we add ' a' on the end to indicate we are styling the links for elements with the navbar class (because links are defined by the a tag). Our stylesheet entry for the navigation bar links may look something like this:

.navbar a {
	font-size: 2em;
	text-decoration: none;
	color: MidnightBlue;
	float: left;
	padding: 14px 16px;
}

Here is what each property represents and what you might want to consider when styling it:

  • font-size - Determines how big the links will be. For a more in-depth tutorial on font-sizes click here.
  • text-decoration - Setting the text-decoration to 'none' means the links will not be underlined.
  • color - Sets the colour of the links (for help on choosing colours then see our colour picker and table).
  • float - The float property determines how the links position themself within the navigation bar. Setting the float value to 'left' means the links will arrange themselves within the navigation bar from left to right. You could also set the float to 'right' or 'none'.
  • padding - Padding determines how much space surrounds the links and ensures they don't cluster together.

Altogether, the HTML and CSS code should combine to create a navigation bar which looks like this:

navbar.PNG

Potential issue! Sometimes fixed navigation bars can obscure other elements. For instance, in the below example, we want the name of our website to appear below the navigation bar when the page is loaded but instead it is partially covered up. obscured.PNG We can fix this by editing some style properties of the navigation bar and the obscured elements. First, in the CSS stylesheet, assign the navigation bar a 'height' in pixels. This ensures we always know how much of the page the navigation bar can potentially obscure. Next, assign a 'margin-top' CSS property to the class of any obscured element. This creates space between the previously obscured element and the top of the screen, thereby ensuring it always loads below the navigation bar. For example, you could set the 'height' of the navbar class and the 'margin-top' of the class for the name of the webpage both to 60px (so the size of the navigation bar is the same as the space between the previously obscured element and top of the webpage). Play around to find the dimensions which work best and remember to check your website on multiple screen sizes to ensure the webpage looks great on all devices!

<<< Previous

Next >>>