How to Create a Simple Floating Menu with HTML and CSS

Introduction

A floating navigation menu is an effective way to keep important links accessible while users browse your website. Because the menu remains visible as the page scrolls, it improves navigation without occupying a permanent section of the layout.

In this tutorial, you’ll build a simple floating menu using only HTML and CSS—no JavaScript required.

Step 1: Create the HTML Structure

Start by creating a container for the menu with an unordered list of navigation links.

<div class="floating-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Step 2: Position the Menu

Use position: fixed so the navigation stays visible while scrolling.

.floating-menu {
    position: fixed;
    width: 100%;
}

Step 3: Add Padding

Give the menu some spacing to improve readability.

.floating-menu {
    position: fixed;
    width: 100%;
    padding: 10px;
}

Step 4: Arrange the Navigation Links

Display the list horizontally by making the <li> elements inline.

.floating-menu ul {
    display: inline-block;
    text-align: center;
}

.floating-menu li {
    display: inline-block;
    margin: 0 10px;
}

.floating-menu a {
    font-weight: bold;
}

Step 5: Style the Floating Menu

Add a semi-transparent background and a subtle shadow to help the menu stand out from the page.

.floating-menu {
    position: fixed;
    width: 100%;
    padding: 10px;
    background-color: rgba(124, 179, 52, 0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Complete Example

HTML

<div class="floating-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

.floating-menu {
    position: fixed;
    width: 100%;
    padding: 10px;
    background-color: rgba(124, 179, 52, 0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.floating-menu ul {
    display: inline-block;
    text-align: center;
}

.floating-menu li {
    display: inline-block;
    margin: 0 10px;
}

.floating-menu a {
    font-weight: bold;
}

Final Result

Simple floating navigation menu created with HTML and CSS.

Conclusion

Creating a floating menu with HTML and CSS is a straightforward way to improve your website’s navigation. By combining position: fixed with a few styling rules, you can build a menu that remains visible as visitors move through your content.

From here, you can extend this example by making the navigation responsive, adding hover effects, or introducing smooth scrolling for a more polished user experience.