Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a \"fixed\" menu with CSS?

CSS Web Development Front End Technology

To create a fixed menu on a web page, use the position property and set the value fixed. A fixed menu stays in the same position on the screen even when the user scrolls down the page. Set the width to 100% using the width property to span the entire viewport width.

Syntax

selector {
    position: fixed;
    top: 0;
    width: 100%;
}

Example: Creating a Fixed Navigation Menu

The following example demonstrates how to create a fixed navigation menu that stays at the top of the page while scrolling −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
        margin-top: 60px;
        font-family: Arial, sans-serif;
    }
    
    nav {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgb(39, 39, 39);
        overflow: auto;
        z-index: 1000;
    }
    
    .links {
        display: inline-block;
        text-align: center;
        padding: 14px 20px;
        color: rgb(178, 137, 253);
        text-decoration: none;
        font-size: 17px;
        transition: background-color 0.3s;
    }
    
    .links:hover {
        background-color: rgb(100, 100, 100);
    }
    
    .selected {
        background-color: rgb(0, 18, 43);
    }
    
    .content {
        padding: 20px;
        line-height: 1.6;
    }
</style>
</head>
<body>
    <nav>
        <a class="links selected" href="#">Home</a>
        <a class="links" href="#">Login</a>
        <a class="links" href="#">Register</a>
        <a class="links" href="#">Contact Us</a>
        <a class="links" href="#">More Info</a>
    </nav>
    
    <div class="content">
        <h1>Main Content</h1>
        <p>This is the main content area. The navigation menu above is fixed and will stay in place when you scroll.</p>
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scroll down to see the fixed menu effect.</p>
        <h2>Section 2</h2>
        <p>More content here to demonstrate scrolling behavior with the fixed navigation menu.</p>
        <h2>Section 3</h2>
        <p>Additional content to show how the menu remains fixed at the top of the viewport.</p>
    </div>
</body>
</html>

A dark gray navigation menu appears fixed at the top of the page with purple-colored links. The "Home" link has a darker background indicating it's selected. When hovering over other links, they show a gray background. The main content appears below with proper spacing from the fixed menu.

Key Properties Explained

Property Value Purpose
position fixed Positions element relative to viewport
top 0 Sticks menu to top of viewport
width 100% Spans full width of viewport
z-index 1000 Ensures menu stays above other content

Conclusion

Creating a fixed menu requires setting position: fixed with top: 0 and width: 100%. Remember to add top margin to the body content to prevent overlap with the fixed menu. Use z-index to ensure proper layering.

Updated on: 2026-03-15T14:18:46+05:30

838 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements