How to Create a Simple Navigation Menu Using HTML/CSS

Navigation Menu Using HTMLCSS

Hello Friends! Whenever you create a website with HTML and CSS, you must use the navigation menu in it. The navigation menu in a web page helps a lot in accessing the content of the website. This allows users to quickly access information and services from the website. That is why it is very important to have a navigation menu in any website.

In this article, we will teach you how to make a navigation menu using HTML and CSS. Here we have also provided the complete source code of the navigation menu for you.

Simple Top Navigation Menu Using HTML/CSS

If you want to create a simple top navigation menu for your web page and you are looking for its source code. Below we have given you the complete code.

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width, initial-scale=1">
        body {
            margin: 0;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        .logo_image {
            width: 100px;
            margin-left: 40px;
        .navbar {
            overflow: hidden;
            background-color: #333;
        .navbar a {
            float: right;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        .navbar {
            background-color: #0446aa;
            color: white;


    <div class="navbar">

        <img class="logo_image" src="image\logo.png" alt="logo image">
        <a href="#">Services</a>
        <a href="#">Contact Us</a>
        <a href="#">About</a>
        <a class="active" href="#">Home</a>




Download Project

How to use Navigation Menu Source Code?

1. Open HTML/CSS editor.

2. Download or Copy code which we have given you above.

3. Paste is on Code editor and run the code.

4. We will see the webpage with a top navigation menu bar.

Note: If you have any error with loading project image, just replace your own image with it.

<img class="logo_image" src="your image source path is here" alt="logo image">
Neeraj Yadav
Howdy Friends! I am Neeraj Yadav a professional Web and App developer. I am trying to share my knowledge through this website. Here you will get amazing coding projects, free courses, programming articles.