How To Create a Responsive HTML Navigation Bar?

HTML needs no introduction. HTML expands as HyperText Markup Language. It is the most popular and widely-used language for web application development. Created in 1991 by Berners-Lee, but published first in 1995, the HTML programming language has gone through a lot of changes and resulting versions over the years. Released in 1999, HTML 4 was a popular breakthrough version that attracted a lot of attention and was adopted across the world fairly quickly - soon becoming the language of choice for web application development for many. The language has been upgraded once more - HTML5; and was published in the year 2012.

In this HTML Navigation Bar article, we focus on navigating between web pages using the navigation bar. We will also add a little bit of CSS to make the webpage look and feel good.

In this article, you will get to learn to code and work on an HTML web application along with us. The application under discussion can navigate between pages using the links provided in the navigation bar. So without further ado, let’s get started!

Prerequisites

We suggest you have a basic knowledge of HTML and CSS before moving on to the tutorial. Even though it is a simple tutorial, it will help if you already know the most basic concepts. We have an article on What is HTML?; you can go check that out.
We are using Visual Studio Code as the text editor for this tutorial. It is a simple, powerful text editor and supports many languages, including HTML, CSS, and JavaScript.

Project Directory

The project directory should look like this in the end.

project directory

Fig: Project Directory

Code

Let’s now start coding this HTML web application. As you can see in the project directory, there are four pages in this web application. Our main goal is to allow users to navigate these pages using the navigation bar to add to all the web pages. Therefore, code will mostly be similar for all four web pages with minor tweaks here and there.

index.html

This is the home (landing) page of the website. Let’s go ahead and get a better understanding of the code in this file.

<!DOCTYPE html>

<head>

<link

href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

rel="stylesheet"

</head>

<body>

<nav>

<h4>Navigation Bar</h4>

</div>

<li><a href="pages/about.html">About</a></li>

<li><a href="pages/services.html">Services</a></li>

<li><a href="pages/contact.html">Contact</a></li>

</ul>

</nav>

</body>

</html>

<html> tag marks the beginning of an HTML document.
Inside <html> tag is the <head> tag. This tag is used for describing the document and importing complementary files that the web application might require.
Import the CSS file and Google font using the <link> tag, inside the <head> tag.
Give a title to this web page using the <title> tag inside the <head> tag.
Close the <head> tag and start the <body> tag. Everything visible on the webpage is defined within this tag.
The <nav> tag defines a set of navigation links that we will use to navigate between the pages.
Add the <div> tag to apply CSS styles to HTML content. HTML elements that have to be styled are assigned class names to be associated with specific CSS styles.
Use <h4> tag to add the heading for the navigation bar.
Use <ul> tag to define unordered (unnumbered) lists.
Use <li> tags within the <ul> tag to add list items to the unordered list.
Use <a> tag to add a hyperlink to any content on the web page. We use this to make the text clickable and to be able to navigate between the pages on the website.
Use <h1> tag for adding big sized text and enclose it within a <div> tag to center it on the webpage.

That’s all the code we needed for this webpage. Going forward, we have to create three more pages to illustrate the concept of navigation in HTML properly. The code is mostly the same, so let’s point out the code’s differences between the pages.

about.html

This is the second page of the website with a very similar code to the first one. Let’s go ahead and look at the differences in the code.

<!DOCTYPE html>

<head>

<link

href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

rel="stylesheet"

<title>About</title>

</head>

<body>

<nav>

<h4>Navigation Bar</h4>

</div>

<li><a class="active" href="about.html">About</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<div class="body-text"><h1>This is About Page!</h1></div>

</body>

</html>

Import the same CSS stylesheet as well as Google font on this page as well.
Change the title of the webpage inside the <head> tag.
Make the second list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.
Change the href links according to the project directory.
Change the <h1> text to let the user know that the page has changed.

services.html

This is the third page of the website with a very similar code to the previous pages. Let’s go ahead and look at the differences in the code.

<!DOCTYPE html>

<head>

<link

href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

rel="stylesheet"

<title>Services</title>

</head>

<body>

<nav>

<h4>Navigation Bar</h4>

</div>

<li><a href="about.html">About</a></li>

<li><a class="active" href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<div class="body-text"><h1>This is Services Page!</h1></div>

</body>

</html>

Import the same CSS stylesheet as well as Google font on this page as well.
Change the title of the webpage inside the <head> tag.
Make the third list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.
Change the href links according to the project directory.
Change the <h1> text to let the user know that the page has changed.

contact.html

This is the fourth and last page of the website with a similar code to the previous pages. Let’s go ahead and look at the differences in the code.

<!DOCTYPE html>

<head>

<link

href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"

rel="stylesheet"

<title>Services</title>

</head>

<body>

<nav>

<h4>Navigation Bar</h4>

</div>

<li><a href="about.html">About</a></li>

<li><a class="active" href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<div class="body-text"><h1>This is Services Page!</h1></div>

</body>

</html>

Import the same CSS stylesheet as well as Google font on this page as well.
Change the title of the webpage inside the <head> tag.
Make the fourth list item active by adding the active class. We have defined the style for the active tab in the CSS stylesheet.
Change the href links according to the project directory.
Change the <h1> text to let the user know that the page has changed.

style.css

This is the CSS stylesheet that we add to the website to make it look and feel good. Let’s go ahead and have a look at the styles added in this stylesheet.

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

.body-text {

display: flex;

font-family: "Montserrat", sans-serif;

align-items: center;

justify-content: center;

margin-top: 250px;

}

nav {

display: flex;

justify-content: space-around;

align-items: center;

min-height: 8vh;

background-color: teal;

font-family: "Montserrat", sans-serif;

}

.heading {

color: white;

text-transform: uppercase;

letter-spacing: 5px;

font-size: 20px;

}

.nav-links {

display: flex;

justify-content: space-around;

width: 30%;

}

.nav-links li {

list-style: none;

}

.nav-links a {

color: white;

text-decoration: none;

letter-spacing: 3px;

font-weight: bold;

font-size: 14px;

padding: 14px 16px;

}

.nav-links a:hover:not(.active) {

background-color: lightseagreen;

}

.nav-links li a.active {

background-color: #4caf50;

}

As mentioned above, CSS styles use class names, among other things, to associate with an HTML element having that class name and apply styles to it.
Define the styles within the class names used in the HTML files to add styles to the HTML elements used in those pages.
The styles are self-explanatory, and you are free to change them according to your style.

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

Output:

This is how the application should look when you code it. So congratulations, you just coded your HTML web application with navigation features.

bar output

Fig: HTML Navigation Bar Output

You can further style your web applications using CSS stylesheet, add interactivity using JavaScript, and build a good website. Keep in mind that you will need to know all three languages at a beginner level.

We hope this HTML Navigation Bar article helped you grasp a few essential navigation concepts in HTML websites. We highly recommend you go through other tutorials and learn more about CSS and JavaScript to become a full-fledged web developer.

Get Ahead of the Curve and Master HTML Today

Now that you’ve learned the basics of HTML and the HTML Navigation bar, an ideal next step would be for you to obtain the skills necessary to take advantage of its immense popularity of this language. Simplilearn’s comprehensive PGP Full Stack Developer Program, is a great choice for this as it will help you become career-ready upon completion.

To learn more, we encourage you to go through our Youtube video providing a quick introduction to HTML Navigation Bar and how to navigate between the HTML web pages.

If you’re an aspiring web and mobile developer, HTML training is almost an essential skill you will need to broaden your career horizons. Do you have any questions for us? Feel free to place your queries in the comments section of this article. Our SMEs will get to them shortly and answer them promptly, at the earliest.

Program Name	Duration	Fees
Caltech Coding Bootcamp Cohort Starts: 16 Dec, 2024	6 Months	$ 8,000
Automation Test Engineer Masters Program Cohort Starts: 27 Nov, 2024	8 months	$ 1,499
Full Stack Java Developer Masters Program Cohort Starts: 18 Dec, 2024	7 months	$ 1,449
Full Stack (MERN Stack) Developer Masters Program Cohort Starts: 8 Jan, 2025	6 Months	$ 1,449

Table of Contents

Prerequisites

Project Directory

Code

index.html

about.html

services.html

contact.html

style.css

Output:

How To Create a Responsive HTML Navigation Bar?

Table of Contents

Prerequisites

Project Directory

Code

index.html

about.html

services.html

contact.html

style.css

Output:

Prerequisites

Want a Top Software Development Job? Start Here!

Project Directory

Code

index.html

about.html

Want a Top Software Development Job? Start Here!

services.html

contact.html

style.css

Output:

Get Ahead of the Curve and Master HTML Today

Our Software Development Courses Duration And Fees

Get Affiliated Certifications with Live Class programs

Post Graduate Program in Full Stack Web Development

Automation Testing Masters Program

Table of Contents

Prerequisites

Project Directory

Code

index.html

about.html

services.html

contact.html

style.css

Output:

How To Create a Responsive HTML Navigation Bar?

Table of Contents

Prerequisites

Project Directory

Code

index.html

about.html

services.html

contact.html

style.css

Output:

Prerequisites

Want a Top Software Development Job? Start Here!

Project Directory

Code

index.html

about.html

Want a Top Software Development Job? Start Here!

services.html

contact.html

style.css

Output:

Get Ahead of the Curve and Master HTML Today

Our Software Development Courses Duration And Fees

Recommended Reads

Get Affiliated Certifications with Live Class programs

Post Graduate Program in Full Stack Web Development

Automation Testing Masters Program