Component:

Header Marketing Dark

Name: Header Marketing Dark
Availability: InStock

Free

Tags: Header Page Section Navigation Marketing Dark

Colors:

Description:

This carefully crafted Header component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Header
@industry: Marketing
@style: Dark
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --color-gray-300: #d1d5db;
  --color-gray-900: #111827;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-white: #ffffff;
  --container-padding: 1.5rem;
  --nav-padding-y: 1rem;
  --space-x-3: 0.75rem;
  --space-x-8: 2rem;
  --space-y-4: 1rem;
  --rounded-lg: 0.5rem;
  --button-padding-x: 1.5rem;
  --button-padding-y: 0.75rem;
  --icon-size: 1.5rem;
  --logo-size: 2.5rem;
  --font-size-xl: 1.25rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Component styles */
.header-section {
  background-color: var(--color-gray-900);
}

.nav-container {
  max-width: 1536px;
  margin: 0 auto;
  padding: var(--container-padding);
}

.nav-wrapper {
  padding: var(--nav-padding-y) 0;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-x-3);
}

.logo {
  width: var(--logo-size);
  height: var(--logo-size);
  background-color: var(--color-blue-600);
  border-radius: var(--rounded-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo svg {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-white);
}

.brand-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: var(--space-x-8);
}

.nav-link {
  color: var(--color-gray-300);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.cta-button {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--rounded-lg);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: var(--color-blue-700);
}

.mobile-menu-button {
  display: block;
  color: var(--color-gray-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-button:hover {
  color: var(--color-white);
}

.mobile-menu-button:focus {
  outline: none;
}

.mobile-menu-button svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.mobile-menu {
  display: none;
  margin-top: var(--space-y-4);
  padding-bottom: var(--nav-padding-y);
}

.mobile-menu.active {
  display: block;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-4);
}

.mobile-nav .cta-button {
  width: 100%;
}

/* Hide menu icon when close icon is visible */
.menu-icon.hidden,
.close-icon.hidden {
  display: none;
}

/* Responsive styles */
@media (min-width: 768px) {
  .desktop-nav {
    display: flex;
  }
  
  .mobile-menu-button {
    display: none;
  }
  
  .mobile-menu {
    display: none !important;
  }
}
</style>

<section class="header-section">
  <nav class="nav-container">
    <div class="nav-content">
      <!-- Logo and company name -->
      <div class="brand">
        <!-- Marketing agency logo placeholder -->
        <div class="logo">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <span class="brand-name">MarketEdge</span>
      </div>

      <!-- Desktop Navigation -->
      <div class="desktop-nav">
        <a href="#services" class="nav-link">Services</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#portfolio" class="nav-link">Portfolio</a>
        <a href="#contact" class="nav-link">Contact</a>
        <button class="cta-button" aria-label="Get Started">
          Get Started
        </button>
      </div>

      <!-- Mobile menu button -->
      <button id="mobile-menu-button" class="mobile-menu-button" aria-label="Toggle menu" aria-expanded="false">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          <path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Mobile Navigation -->
    <div id="mobile-menu" class="mobile-menu" aria-label="Mobile navigation">
      <div class="mobile-nav">
        <a href="#services" class="nav-link">Services</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#portfolio" class="nav-link">Portfolio</a>
        <a href="#contact" class="nav-link">Contact</a>
        <button class="cta-button" aria-label="Get Started">
          Get Started
        </button>
      </div>
    </div>
  </nav>
</section>

<script>
  // Mobile menu toggle functionality
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = mobileMenuButton.querySelector('.menu-icon');
  const closeIcon = mobileMenuButton.querySelector('.close-icon');

  mobileMenuButton.addEventListener('click', () => {
    const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
    mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
    mobileMenu.classList.toggle('active');
    menuIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
  });
</script>


                <!--
@type: Header
@industry: Marketing
@style: Dark
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-900">
  <nav class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <!-- Logo and company name -->
      <div class="flex items-center space-x-3">
        <!-- Marketing agency logo placeholder -->
        <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <span class="text-xl font-bold text-white">MarketEdge</span>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#services" class="text-gray-300 hover:text-white transition-colors">Services</a>
        <a href="#about" class="text-gray-300 hover:text-white transition-colors">About</a>
        <a href="#portfolio" class="text-gray-300 hover:text-white transition-colors">Portfolio</a>
        <a href="#contact" class="text-gray-300 hover:text-white transition-colors">Contact</a>
        <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors" aria-label="Get Started">
          Get Started
        </button>
      </div>

      <!-- Mobile menu button -->
      <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none" aria-label="Toggle menu" aria-expanded="false">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          <path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Mobile Navigation -->
    <div id="mobile-menu" class="md:hidden hidden mt-4 pb-4" aria-label="Mobile navigation">
      <div class="flex flex-col space-y-4">
        <a href="#services" class="text-gray-300 hover:text-white transition-colors">Services</a>
        <a href="#about" class="text-gray-300 hover:text-white transition-colors">About</a>
        <a href="#portfolio" class="text-gray-300 hover:text-white transition-colors">Portfolio</a>
        <a href="#contact" class="text-gray-300 hover:text-white transition-colors">Contact</a>
        <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors w-full" aria-label="Get Started">
          Get Started
        </button>
      </div>
    </div>
  </nav>
</section>

<script>
  // Mobile menu toggle functionality
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = mobileMenuButton.querySelector('.menu-icon');
  const closeIcon = mobileMenuButton.querySelector('.close-icon');

  mobileMenuButton.addEventListener('click', () => {
    const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
    mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
    mobileMenu.classList.toggle('hidden');
    menuIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
  });
</script>

Header Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions