Retro 90s Style Navbar Template

Travel back in time with this retro 90s style navbar. But don't worry, it's definitely mobile-responsive and accessible. Copy and paste the code straight into your own web projects for a blast from the past!

Get Source Code & Preview → Preview →

The Retro 90s Navbar

A nostalgic trip back to the early days of the web. This navbar uses pixelated fonts, a "web-safe" color palette, and classic 3D button effects to perfectly capture the look and feel of a GeoCities-era website, all built on a modern, accessible, and responsive foundation.

3D Bevel & Emboss Effect — Uses the classic CSS outset border style to create that iconic 3D button look. Buttons appear to press "in" on click and hover.
Pixelated Typography — Utilizes a pixel-perfect font ("VT323" from Google Fonts) and classic hyperlink blue for maximum authenticity.
Instant State Changes — All animations and transitions have been disabled. Hover and active states change instantly, just like they did in the 90s.
Responsive Design: While the aesthetic is retro, the code is mobile-first, featuring a simple "MENU" button that toggles the navigation on smaller screens.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is heavily commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro 90s Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Retro 90s Theme)
        ========================================
        */
        :root {
            /* Classic "web-safe" color palette */
            --color-background: #c0c0c0; /* silver */
            --color-text: #000000;
            --color-link: #0000ff; /* blue */
            --color-link-visited: #800080; /* purple */
            
            /* Using a classic pixel font from Google Fonts */
            --font-family-pixel: 'VT323', monospace;
            
            --border-width: 3px;
            --border-style-outset: var(--border-width) outset;
            --border-style-inset: var(--border-width) inset;
        }

/* Import the Google Font for the retro look */
        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
        
        /*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }

body {
            margin: 0;
            font-family: var(--font-family-pixel);
            font-size: 1.25rem; /* Pixel fonts look better when a bit larger */
            line-height: 1.5;
            color: var(--color-text);
            background-color: var(--color-background);
            /* Optional: Add a tiling background for more authenticity */
            /* background-image: url('https://www.publicdomainpictures.net/pictures/30000/t2/diamond-plate-texture.jpg'); */
        }
        
        .content { height: 200vh; padding: 120px 2rem; text-align: center; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { color: var(--color-link); }
        a:visited { color: var(--color-link-visited); }

/*
        ========================================
        Navbar Base & Mobile Styles
        ========================================
        */
        .navbar {
            padding: 1rem;
            background-color: var(--color-background);
            border-bottom: var(--border-style-outset);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.navbar__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar__brand {
            font-size: 2rem;
            color: var(--color-text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .navbar__toggle {
            font-family: inherit; /* Ensure button uses pixel font */
            font-size: 1.25rem;
            padding: 0.5rem 1rem;
            background-color: var(--color-background);
            border: var(--border-style-outset);
            color: var(--color-text);
            cursor: pointer;
        }
        
        .navbar__toggle:active {
             border-style: inset;
        }

.navbar__menu {
            display: none;
            padding: 1rem 0;
        }

.navbar__menu.is-active { display: block; }
        .navbar__item { margin-top: 1rem; text-align: center; }

/* Mobile links */
        .navbar__link { text-decoration: underline; }

/* Accessible focus style reminiscent of old browsers */
        :is(.navbar__toggle, .navbar__link):focus-visible {
            outline: 2px dotted var(--color-text);
            outline-offset: 4px;
        }

/*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__container {
                flex-direction: column; /* Stack brand above nav */
                gap: 1rem;
            }

.navbar__toggle { display: none; }
            .navbar__menu { display: block; padding: 0; }
            .navbar__list { display: flex; align-items: center; gap: 0.5rem; }

.navbar__item {
                margin: 0;
                background-color: var(--color-background);
                border: var(--border-style-outset);
                /* For IE4 vibes, let's put borders between items */
                border-left: var(--border-width) solid #808080;
                border-top: var(--border-width) solid #808080;
            }

.navbar__item:first-child { border-left: var(--border-style-outset); }
            .navbar__item:last-child { border-right: var(--border-style-outset); }

.navbar__link {
                display: block;
                padding: 0.5rem 1rem;
                text-decoration: none; /* Links inside buttons don't need underlines */
            }

/* The "pushed-in" effect for desktop */
            .navbar__item:hover,
            .navbar__item:focus-within { /* Use focus-within to style the parent LI */
                border-style: inset;
            }

.navbar__link:active {
                /* Make text appear to shift down and right on click */
                transform: translate(1px, 1px);
            }

:is(.navbar__item:focus-within) a {
                 outline: none; /* Hide default outline since parent LI has it */
            }
        }
    </style>
</head>
<body>
    <header class="navbar" role="banner">
        <div class="navbar__container">
            <a href="#" class="navbar__brand" aria-label="My Cool Website Homepage">
                My Site
            </a>
            
            <button class="navbar__toggle" 
                    id="navbarToggle" 
                    aria-label="Toggle Navigation Menu" 
                    aria-controls="navbarMenu" 
                    aria-expanded="false">
                MENU
            </button>
        </div>

<nav id="navbarMenu" class="navbar__menu" role="navigation" aria-labelledby="navbarToggle">
            <ul class="navbar__list">
                <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                <li class="navbar__item"><a href="#" class="navbar__link">Guestbook</a></li>
                <li class="navbar__item"><a href="#" class="navbar__link">Webrings</a></li>
                <li class="navbar__item"><a href="#" class="navbar__link">About_Me</a></li>
                <li class="navbar__item"><a href="#" class="navbar__link">Links.html</a></li>
            </ul>
        </nav>
    </header>

<main class="content">
        <h1>Under Construction!</h1>
    </main>
    
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const navbarToggle = document.getElementById('navbarToggle');
            const navbarMenu = document.getElementById('navbarMenu');

if (navbarToggle && navbarMenu) {
                navbarToggle.addEventListener('click', function () {
                    // Toggle the 'is-active' class on the menu to show/hide it
                    navbarMenu.classList.toggle('is-active');

// Update the aria-expanded attribute for screen reader accessibility
                    const isExpanded = navbarMenu.classList.contains('is-active');
                    navbarToggle.setAttribute('aria-expanded', isExpanded);
                });
            }
        });
    </script>
</body>
</html>

View Output