Swipeable Mobile Menu Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Swipeable Mobile Menu</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (News/Media Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #111827;
            --color-text-secondary: #6b7280;
            --color-primary-accent: #dc2626; /* A news-y red */
            --color-border: #f3f4f6;

--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --navbar-height: 60px;
            --container-width: 1280px;
            --transition-speed: 0.2s;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; background-color: #f9fafb; }
        .content { min-height: 150vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }
        
        /*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height);
            display: flex; align-items: center;
            background-color: var(--color-background);
            border-bottom: 2px solid var(--color-border);
            padding: 0 1rem; /* Padding for the entire navbar */
        }

/*
        ========================================
        Swipeable Menu Styles (Mobile First)
        ========================================
        */
        .swipeable-nav {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative; /* For the fade effects */
        }
        
        .nav-list-wrapper {
            /* This is the key to the horizontal scrolling */
            overflow-x: auto;
            /* Hides the scrollbar visually on most browsers */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

/* Optional: Add scroll snapping for a cleaner stop */
            scroll-snap-type: x mandatory;
        }
        .nav-list-wrapper::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }
        
        .nav-list {
            display: flex;
            gap: 1.5rem; /* Spacing between links */
            padding: 0 0.5rem; /* Give a little space at the ends */
        }
        
        .nav-link {
            display: block; white-space: nowrap; /* Prevent links from line-breaking */
            padding-bottom: 4px;
            color: var(--color-text-secondary);
            font-weight: 500;
            border-bottom: 3px solid transparent;
            scroll-snap-align: start; /* Each link is a snap point */
        }
        
        .nav-link:hover { color: var(--color-text-primary); }
        .nav-link.is-active {
            color: var(--color-primary-accent);
            border-bottom-color: var(--color-primary-accent);
        }

/* The fade effect to indicate more content */
        .nav-list-wrapper::before,
        .nav-list-wrapper::after {
            content: ''; position: absolute; top: 0; bottom: 0;
            width: 20px; z-index: 1; pointer-events: none;
        }
        .nav-list-wrapper::before {
            left: 0;
            background: linear-gradient(to right, var(--color-background), transparent);
        }
        .nav-list-wrapper::after {
            right: 0;
            background: linear-gradient(to left, var(--color-background), transparent);
        }
        
        /* The brand is hidden by default (mobile-first) */
        .navbar__brand {
            display: none;
        }

/*
        ========================================
        Desktop Fallback Styles
        ========================================
        */
        @media (min-width: 1024px) {
            .navbar__brand {
                display: inline-block; /* Or 'block', both work */
                font-size: 1.5rem;
                font-weight: 600;
                color: var(--color-text-primary);
                margin-right: 2rem;
            }

.nav-list-wrapper {
                /* On desktop, disable scrolling and fade effects */
                overflow-x: visible;
            }
            .nav-list-wrapper::before,
            .nav-list-wrapper::after {
                display: none;
            }
            .nav-list {
                justify-content: flex-start; /* Align to the left after the brand */
                width: auto;
                flex-grow: 1; /* Allow it to take up the remaining space */
            }
        }

</style>
</head>
<body>

<header class="navbar">
        <nav class="swipeable-nav">
            
            <a href="#" class="navbar__brand">NewsCo</a>

<div class="nav-list-wrapper">
                <ul class="nav-list">
                    <li><a href="#" class="nav-link is-active">Home</a></li>
                    <li><a href="#" class="nav-link">World</a></li>
                    <li><a href="#" class="nav-link">U.S. Politics</a></li>
                    <li><a href="#" class="nav-link">Business</a></li>
                    <li><a href="#" class="nav-link">Tech</a></li>
                    <li><a href="#" class="nav-link">Science</a></li>
                    <li><a href="#" class="nav-link">Health</a></li>
                    <li><a href="#" class="nav-link">Sports</a></li>
                    <li><a href="#" class="nav-link">Arts</a></li>
                    <li><a href="#" class="nav-link">Style</a></li>
                    <li><a href="#" class="nav-link">Travel</a></li>
                    <li><a href="#" class="nav-link">Opinion</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <main class="content">
        <h1>Swipeable Mobile Menu</h1>
        <p>On a narrow (mobile) screen, you can swipe the navigation bar horizontally to see all the links. On a wide (desktop) screen, they are all visible at once.</p>
    </main>

</body>
</html>