Minimal Pro Navbar

rohitwushu
Jan 23, 2026 7
Live Preview

Live Editor

 <div class="top-bar">
        <div class="top-bar-content">
            <div class="top-left">
                <span class="top-item">📍 New York, USA</span>
                <span class="top-divider">|</span>
                <span class="top-item">✉️ hello@example.com</span>
            </div>
            <div class="top-right">
                <a href="#" class="social-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                    </svg>
                </a>
                <a href="#" class="social-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                    </svg>
                </a>
                <a href="#" class="social-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <!-- Main Navbar -->
    <nav class="navbar" id="navbar">
        <div class="container">
            <!-- Logo -->
            <a href="#" class="logo">
                <div class="logo-box">
                    <span class="logo-letter">U</span>
                </div>
                <div class="logo-content">
                    <span class="logo-name">UIBLITZ</span>
                    <span class="logo-sub">Creative Agency</span>
                </div>
            </a>

            <!-- Desktop Menu -->
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#home" class="nav-link active">
                        <span>Home</span>
                        <div class="nav-dot"></div>
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#services" class="nav-link">
                        <span>Services</span>
                        <svg class="dropdown-icon" width="12" height="12" viewBox="0 0 12 12" fill="none">
                            <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        <div class="nav-dot"></div>
                    </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Web Design</a>
                        <a href="#" class="dropdown-item">Development</a>
                        <a href="#" class="dropdown-item">Branding</a>
                        <a href="#" class="dropdown-item">Marketing</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#portfolio" class="nav-link">
                        <span>Portfolio</span>
                        <div class="nav-dot"></div>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">
                        <span>About</span>
                        <div class="nav-dot"></div>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">
                        <span>Contact</span>
                        <div class="nav-dot"></div>
                    </a>
                </li>
            </ul>

            <!-- Right Actions -->
            <div class="nav-actions">
                <div class="language-selector">
                    <button class="lang-btn">
                        <span>EN</span>
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                            <path d="M2 3L5 6L8 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
                <button class="primary-btn">
                    <span>Get Quote</span>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M1 8H15M15 8L9 2M15 8L9 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>

            <!-- Mobile Toggle -->
            <button class="mobile-toggle" id="mobileToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </nav>

    <!-- Mobile Menu -->
    <div class="mobile-nav" id="mobileNav">
        <div class="mobile-nav-wrapper">
            <div class="mobile-header">
                <div class="mobile-logo">
                    <div class="logo-box small">
                        <span class="logo-letter">V</span>
                    </div>
                    <span class="mobile-logo-text">Velocity</span>
                </div>
                <button class="mobile-close" id="mobileClose">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>

            <div class="mobile-content">
                <ul class="mobile-menu">
                    <li class="mobile-item">
                        <a href="#home" class="mobile-link">
                            <span class="mobile-number">01</span>
                            <span class="mobile-text">Home</span>
                        </a>
                    </li>
                    <li class="mobile-item has-submenu">
                        <button class="mobile-link submenu-toggle">
                            <span class="mobile-number">02</span>
                            <span class="mobile-text">Services</span>
                            <svg class="submenu-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M3 5L7 9L11 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                        <ul class="mobile-submenu">
                            <li><a href="#" class="submenu-link">Web Design</a></li>
                            <li><a href="#" class="submenu-link">Development</a></li>
                            <li><a href="#" class="submenu-link">Branding</a></li>
                            <li><a href="#" class="submenu-link">Marketing</a></li>
                        </ul>
                    </li>
                    <li class="mobile-item">
                        <a href="#portfolio" class="mobile-link">
                            <span class="mobile-number">03</span>
                            <span class="mobile-text">Portfolio</span>
                        </a>
                    </li>
                    <li class="mobile-item">
                        <a href="#about" class="mobile-link">
                            <span class="mobile-number">04</span>
                            <span class="mobile-text">About</span>
                        </a>
                    </li>
                    <li class="mobile-item">
                        <a href="#contact" class="mobile-link">
                            <span class="mobile-number">05</span>
                            <span class="mobile-text">Contact</span>
                        </a>
                    </li>
                </ul>

                <div class="mobile-footer">
                    <button class="mobile-cta-btn">Get a Free Quote</button>
                    <div class="mobile-info">
                        <p>📍 New York, USA</p>
                        <p>✉️ hello@example.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6366f1;
    --dark: #0f172a;
    --light: #ffffff;
    --gray: #64748b;
    --border: #e2e8f0;
    --hover: #f8fafc;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
   
}

/* Top Bar */
.top-bar {
    background: var(--dark);
    color: var(--light);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.top-item {
    opacity: 0.9;
}

.top-divider {
    opacity: 0.3;
}

.top-right {
    display: flex;
    gap: 0.75rem;
}

.social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    border-radius: 6px;
}

.social-icon:hover {
    color: var(--light);
    background: rgba(255, 255, 255, 0.1);
}

/* Main Navbar */
.navbar {
    position: sticky;
    top: 0;
    background: var(--light);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: translateY(-2px);
}

.logo-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.logo-box.small {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.logo-letter {
    color: var(--light);
    font-size: 1.5rem;
    font-weight: 700;
}

.logo-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.logo-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
}

.logo-sub {
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Desktop Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    background: var(--hover);
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary);
}

.nav-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-link.active .nav-dot {
    opacity: 1;
}

.dropdown-icon {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.dropdown.active .dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--dark);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: var(--hover);
    color: var(--primary);
    padding-left: 1.25rem;
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-selector {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--dark);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: var(--hover);
    border-color: var(--primary);
}

.primary-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: var(--light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-toggle span {
    width: 26px;
    height: 2.5px;
    background: var(--dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Nav */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--light);
    z-index: 1000;
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.mobile-nav.active {
    left: 0;
}

.mobile-nav-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
}

.mobile-close {
    width: 40px;
    height: 40px;
    background: var(--hover);
    border: none;
    border-radius: 8px;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-close:hover {
    background: var(--border);
    transform: rotate(90deg);
}

.mobile-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu {
    list-style: none;
}

.mobile-item {
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateX(-30px);
}

.mobile-nav.active .mobile-item:nth-child(1) { animation: slideRight 0.4s ease 0.1s forwards; }
.mobile-nav.active .mobile-item:nth-child(2) { animation: slideRight 0.4s ease 0.2s forwards; }
.mobile-nav.active .mobile-item:nth-child(3) { animation: slideRight 0.4s ease 0.3s forwards; }
.mobile-nav.active .mobile-item:nth-child(4) { animation: slideRight 0.4s ease 0.4s forwards; }
.mobile-nav.active .mobile-item:nth-child(5) { animation: slideRight 0.4s ease 0.5s forwards; }

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    text-decoration: none;
    color: var(--dark);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.mobile-link:hover {
    background: var(--hover);
    padding-left: 1.5rem;
}

.mobile-number {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 400;
}

.mobile-text {
    flex: 1;
}

.submenu-arrow {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.mobile-item.open .submenu-arrow {
    transform: rotate(180deg);
}

.mobile-submenu {
    list-style: none;
    padding-left: 3rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-item.open .mobile-submenu {
    max-height: 300px;
    padding-top: 0.5rem;
}

.submenu-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--gray);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.submenu-link:hover {
    color: var(--primary);
    background: var(--hover);
    padding-left: 1.25rem;
}

.mobile-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.mobile-cta-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    color: var(--light);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.mobile-cta-btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
}

.mobile-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-info p {
    color: var(--gray);
    font-size: 0.9rem;
}

/* Hero */
.hero {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-wrapper {
    text-align: center;
    max-width: 700px;
}

.hero-wrapper h1 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-wrapper p {
    font-size: 1.25rem;
    color: var(--gray);
}

/* Responsive */
@media (max-width: 1024px) {
    .top-bar {
        display: none;
    }

    .nav-menu,
    .nav-actions {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .hero-wrapper h1 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .mobile-nav {
        max-width: 100%;
    }

    .logo-name {
        font-size: 1.15rem;
    }

    .logo-sub {
        font-size: 0.7rem;
    }

    .hero-wrapper h1 {
        font-size: 2rem;
    }

    .hero-wrapper p {
        font-size: 1rem;
    }
}
 const navbar = document.getElementById('navbar');
        const mobileToggle = document.getElementById('mobileToggle');
        const mobileNav = document.getElementById('mobileNav');
        const mobileClose = document.getElementById('mobileClose');
        const body = document.body;

        // Mobile menu toggle
        mobileToggle.addEventListener('click', () => {
            mobileNav.classList.add('active');
            body.style.overflow = 'hidden';
        });

        mobileClose.addEventListener('click', () => {
            mobileNav.classList.remove('active');
            body.style.overflow = '';
        });

        // Close on link click
        document.querySelectorAll('.mobile-link:not(.submenu-toggle)').forEach(link => {
            link.addEventListener('click', () => {
                mobileNav.classList.remove('active');
                body.style.overflow = '';
            });
        });

        // Mobile submenu toggle
        document.querySelectorAll('.submenu-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                this.parentElement.classList.toggle('open');
            });
        });

        // Navbar scroll effect
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Desktop dropdown
        document.querySelectorAll('.dropdown').forEach(dropdown => {
            dropdown.addEventListener('mouseenter', function() {
                this.classList.add('active');
            });
            dropdown.addEventListener('mouseleave', function() {
                this.classList.remove('active');
            });
        });

        // Active link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                if (!this.parentElement.classList.contains('dropdown')) {
                    document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                }
            });
        });
Comments 1

Want to comment?

Please login or sign up to post comments.
rohitwushu

Jan 23, 2026 at 02:26 PM
Great
Categories

Minimal Pro Navbar

Live Preview

Live Editor

Comments 1

Want to comment?

rohitwushu
