How to Create a Simple Fixed Top Menu Using HTML and CSS

Introduction

A fixed-top menu remains at the top of the screen even as the user scrolls down the page. This is especially useful for providing constant access to navigation links. In this tutorial, we will create a fixed-top menu similar to the one shown in the image you provided.

Development Steps

Create the HTML Structure: Construct the basic HTML structure for the fixed-top menu.
Style the Fixed Top Menu Using CSS: Apply CSS to fix the menu at the top and style the navigation links.
Make the Menu Responsive: Ensure the menu adapts to different screen sizes.

Step 1: Create the HTML Structure

We’ll begin by creating the HTML structure for the fixed-top menu, which will contain several navigation links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Top Menu</title>
</head>
<body>

    <!-- Step 1: Fixed top menu structure -->
    <div class="topnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Content to show the fixed menu functionality -->
    <div class="content">
        <h1>Fixed Top Menu</h1>
        <p>Scroll this page to see the effect</p>
        <p>The navigation bar will stay at the top of the page while scrolling</p>
        <p>Some text some text some text some text...</p>
        <p>Some text some text some text some text...</p>
        <!-- More content here to enable scrolling -->
    </div>

</body>
</html>

Now, we will style the fixed-top menu using CSS to keep it at the top and style it according to your preference based on the image.

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding-top: 40px; /* Add padding to ensure content is visible below the fixed menu */
    }

    /* Style the fixed top menu */
    .topnav {
        position: fixed; /* Fix the position at the top */
        top: 0;
        width: 100%; /* Full width */
        background-color: #333; /* Dark background for the menu */
        overflow: hidden; /* Hide any overflow */
    }

    /* Style for menu items */
    .topnav a {
        float: left; /* Align links to the left */
        display: block;
        color: white; /* Text color */
        text-align: center;
        padding: 14px 16px; /* Padding for spacing */
        text-decoration: none; /* No underline */
    }

    /* Hover effect for links */
    .topnav a:hover {
        background-color: #ddd; /* Light background on hover */
        color: black; /* Text color change on hover */
    }

    /* Style for the active/current link */
    .topnav a.active {
        background-color: #04AA6D; /* Green background for the active link */
        color: white;
    }

    /* Content styling */
    .content {
        padding: 16px;
    }
</style>

Adding basic responsiveness to ensure the menu looks good on smaller screens:

<style>
    @media screen and (max-width: 600px) {
        .topnav a {
            float: none; /* Stack links vertically on small screens */
            width: 100%; /* Full width */
        }
    }
</style>

Complete Code

Here is the complete code, including HTML and CSS, for creating a simple fixed-top menu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Top Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding-top: 40px;
        }

        .topnav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            overflow: hidden;
        }

        .topnav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #04AA6D;
            color: white;
        }

        .content {
            padding: 16px;
        }

        @media screen and (max-width: 600px) {
            .topnav a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <div class="topnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
    </div>

    <div class="content">
        <h1>Fixed Top Menu</h1>
        <p>Scroll this page to see the effect</p>
        <p>The navigation bar will stay at the top of the page while scrolling</p>
        <p>Some text some text some text some text...</p>
        <!-- More content here to enable scrolling -->
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

This tutorial guided you through creating a simple and effective fixed-top menu. The menu remains visible as the user scrolls, providing easy access to the navigation links at all times. This layout is particularly useful for enhancing user navigation on websites with lots of content.

Java Guides

Search This Blog