HTML navigation bar | HTML navigation bar CSS horizontal

HTML navigation bar

Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn How to make an HTML navigation bar. To make the navigation bar we use only HTML and CSS. In the earlier blog, I shared Word Counter in JavaScript which I recommend you to watch.

HTML navigation bar

A navigation bar is a crucial element of any website. It allows visitors to quickly find the information they need and navigate to the desired page.

There are many different ways to design a navigation bar. Some common elements include links, buttons, and drop-down menus. The layout and style of the navigation bar can vary depending on the website’s overall design.

It’s important to consider the user experience when designing a navigation bar. The navigation bar should be easy to understand and use. All of the links should be clearly labelled and the overall layout should be logical and intuitive.

A well-designed navigation bar can make a big difference in the overall user experience of a website. If you’re looking to improve your website’s navigation bar, there are a few key things to keep in mind. Keep it simple, easy to use, and visually appealing, and you’ll be on your way to creating a navigation bar that your users will love.

HTML navigation bar horizontal

The HTML for a navigation bar can be created using a <div> element. Inside the element, you can add an <ul> element. The <ul> element will contain a list of links that will be displayed in the navigation bar.

An HTML navigation bar is a list of links that lead to different pages on a website. This list can be created using the HTML <ul> and
<li> tags.

The <ul> tag defines an unordered list, while the <il> tag defines a list item. The list items will be the links in our navigation bar.

We can add a bit of basic CSS to style our navigation bar. In this example, we’ll give the nav bar background colour, some padding, and make the links white.

You might like this:

Here’s the HTML code for our navigation bar:

HTML navigation bar CSS [ Source Code ]

Step 1

Initially you need to create two files HTML (.html) and CSS (.css) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<html lang="en">
	<meta charset="UTF-8">
	<title>HTML navigation bar</title>
	<link rel="stylesheet" href="style.css">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>

Step 2

And, create a CSS file name style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

/* Add a black background color to the top navigation */
.topnav {
  background-color: #523558;
  overflow: hidden;

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;

/* Add a color to the active/current link */
.topnav {
  background-color: #9200FF;
  color: white;

That’s all, now you’ve successfully built an HTML navigation bar. If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.


Please enter your comment!
Please enter your name here