How to Create a Simple Navigation Menu Using HTML/CSS

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 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/download/button

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">

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post