NEW HEADER – CSS Snippet

Go back

<header class="site-header">

    <div class="header-pill">

        <!-- Logo -->
        <a href="#" class="logo">
            <span class="logo-symbol">✦</span>
            <span class="logo-name">YOURNAME</span>
        </a>

        <!-- Navigation -->
        <nav class="nav-links">

            <a href="#home" class="nav-item active">
                <span>01</span>
                Home
            </a>

            <a href="#work" class="nav-item">
                <span>02</span>
                Work
            </a>

            <a href="#about" class="nav-item">
                <span>03</span>
                About
            </a>

            <a href="#contact" class="nav-item">
                <span>04</span>
                Contact
            </a>

        </nav>

        <!-- Right Side -->
        <div class="header-right">

            <div class="availability">
                <i></i>
                Available
            </div>

            <a href="#contact" class="contact-btn">
                Let's Talk
                <span>↗</span>
            </a>

        </div>

    </div>

</header>
```