Search The Hostwinds Guides Knowledge Base

How to Add a Navigation Bar to Your Website

Share This Article

This guide will explain how to build a simple responsive navigation bar and will build on the concepts discussed in the previous article on building a landing page and making your site more mobile friendly. Are you ready to get started building your navigation bar? Me too, let’s go.

 

Why You Need A Navigation Bar

If your sites have multiple pages on it, you may want a way for your visitors to easily navigate between pages instead of having to type the URL each time they want to change pages. This guide will go over how to create the following navigation bar.

Make a plan

Depending on your site there may be quite a few different sub domains, however, to provide ease of access to the visitors the navigation bar should only include the pertinent links. It is time to decide which links need to be included and if there is any additional content such as social media links or a login box that need to be included.

 

Creating the Navbar For index.html

Before creating styles for the navbar, the elements and class need to be defined in the index.html page which will server as your website’s homepage.

Step one: Creating the Navbar

This example uses the tag <ul> which stands for uniformed list, with the links and social media icons being the <li> list items.

 

Step two: Creating classes and links

Your site will probably use the navigation bar on multiple pages, which might also call similar elements. In order to make sure that the correct attributes defined in the CSS, the elements you will need to use classes.

Here is an example of adding a href anchor inside each of the list items to allow the items to be linked to another page. These can be actual links like example.com/blog or file names as shown here:

 

Step three: Adding the social media icons

In this example the social media uses SVG Icons, this guide uses public domain icons. These were added in the file manager and called through their file path/name.

In the image above, the social media icons have very different formatting than the page links and can be seen on the lower left side. The is accomplished by adding an additional div container and creating two classes. The Div’s class being ‘social’ and the li class socialmedia.

Here is what this example’s navigation bar html will look like for your index.html page:

 

Format Your Navbar In The css.css

In order to reduce the redundant or overlapping of formatting, start with the most ‘broad’ element or class then work down.

Step Four: Make the navbar vertical

In order to make the vertical navigation bar cover the entire side of the screen, there needs to adjust some formatting. The top (a position from the top) should be changed to zero with the position as fixed. The height should be 100% and the width would depend on the layout of your site. This is where the background color (including the opacity) will be called. Here is what the example’s navbar class looks like:

 

Step Five: Formatting each element and class.

The more specific you want to be on the element needs to be more specifically called in the css. Classes can be used on different element types when there is an option in CSS to call the general class as well as the specific element in that class

For example to call the general div class social would look like this:

However to call a specific element within the class like the list item anchor within the social media class would look like

The ul and li tags do have some predefined settings, the bullet points and underlines can be removed in this example by adding this attribute to the element ul.navbar li a

Here is an example of what the css.css for the navigation bar in this example looks like:

 

Step Six: Adding a hover effect

 

 

As seen in the above code segment, a hover effect can be added by including a section: hover to whichever element needs to be affected, shown here:

 

Make It Responsive

Edit your @media sections to create more layout options depending on screen size as shown here:

 

Mobile View:

 

Depending on the screen size a vertical navigation bar may not be the best fit for the site. Using the same concepts from the How to make a mobile-friendly site guide, adding some code to the @media tags can create a responsive navbar

 

Step Seven: Change to a horizontal navbar

The current css.css has the navigation bar as vertical this can be changed by redefining the height and width attributes.

Because the links and icons were previously formatted to display horizontally, their attributes will need to be updated as well. Here are the examples @media sections for both 900px and 400px screen sizes

 

Test your site!

To prepare for different types of traffic, test your site using multiple browser such as Mozilla, Chrome and Safari. Also, check to make sure all of your links work and point to the correct location.

 

For reference

Here is the entire code used in this guide for your convenience:

index.html

 

css.css

 

Related Articles