Header Generator

Header Configuration

Header Type

Brand/Logo Text

Logo URL (Optional)

Navigation Items (one per line)

Header Style

CTA Button Text

Generated Code

Live Preview

Header Generator

Generate responsive website headers with navigation menus, logos, and modern layouts. Perfect for building professional website headers.

Header Types

Basic Header: Simple header with logo and navigation
Navbar Header: Bootstrap-style navigation bar
Hero Header: Large header with call-to-action
Sticky Header: Fixed header that stays on scroll
Mega Menu: Header with dropdown mega menus
Sidebar Toggle: Header with hamburger menu

Features

Responsive design
Multiple color schemes
Logo and brand support

Search functionality
Social media links
CTA buttons

Discover Toolexe, a comprehensive collection of free web tools designed for both regular users and developers. Everything is quick, free, and available for use, including time calculators, smart unit converters, HTML formatters, and useful JSON tools. No restrictions or signup the tools you require, when you need them.

Tools Categories

`;headerPreview.innerHTML = html;applyHeaderStyles(css);} function getHeaderConfig() {return {type: document.getElementById('header-type').value,brandText: document.getElementById('brand-text').value,logoUrl: document.getElementById('logo-url').value,navItems: document.getElementById('nav-items').value.split('\n').filter(item => item.trim()),style: document.getElementById('header-style').value,bgColor: document.getElementById('bg-color').value,textColor: document.getElementById('text-color').value,responsiveMenu: document.getElementById('responsive-menu').checked,searchBox: document.getElementById('search-box').checked,ctaButton: document.getElementById('cta-button').checked,ctaText: document.getElementById('cta-text').value,socialLinks: document.getElementById('social-links').checked,dropdownMenu: document.getElementById('dropdown-menu').checked,fixedTop: document.getElementById('fixed-top').checked};} function generateHeaderCode(config) {const headerClass = getHeaderClass(config);let html = `

\n`;html += `

\n`;if (config.type === 'navbar') {html += generateNavbarHeader(config);} else if (config.type === 'hero') {html += generateHeroHeader(config);} else if (config.type === 'mega') {html += generateMegaHeader(config);} else {html += generateBasicHeader(config);} html += `

\n`;html += `

\n`;const css = generateHeaderCSS(config);const js = generateHeaderJS(config);return { html, css, js };} function getHeaderClass(config) {let classes = ['header'];classes.push(`header-${config.type}`);classes.push(`header-${config.style}`);if (config.fixedTop) {classes.push('header-fixed');} return classes.join(' ');} function generateNavbarHeader(config) {let html = `

\n`;html += ` \n`;html += ` \n`;html += ` \n`;html += `

\n`;if (config.responsiveMenu) {html += ` \n`;} return html;} function generateHeroHeader(config) {let html = `

\n`;html += `

\n`;html += ` <' + 'h1 class="hero-title">Welcome to ' + config.brandText + '\n`;html += `

Your amazing website description goes here

\n`;if (config.ctaButton) {html += ` \n`;} html += `

\n`;html += `

\n`;return html;} function generateMegaHeader(config) {let html = ` \n`;return html;} function generateBasicHeader(config) {let html = `

\n`;html += `

\n`;if (config.logoUrl) {html += `

\n`;} html += ` <' + 'h1 class="brand-text">' + config.brandText + '\n`;html += `

\n`;html += ` \n`;html += `

\n`;return html;} function generateHeaderCSS(config) {const colors = getColorScheme(config);return `.header {width: 100%;padding: 1rem 0;background-color: ${colors.bg};color: ${colors.text};font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;box-shadow: 0 2px 4px rgba(0,0,0,0.1);} .header-fixed {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;} .container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;} .navbar {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;} .navbar-brand {display: flex;align-items: center;gap: 0.5rem;font-size: 1.5rem;font-weight: bold;text-decoration: none;color: ${colors.text};} .logo {height: 40px;width: auto;} .navbar-nav {display: flex;gap: 2rem;align-items: center;} .nav-link {color: ${colors.text};text-decoration: none;font-weight: 500;transition: color 0.3s ease;} .nav-link:hover {color: ${colors.accent};} .navbar-right {display: flex;align-items: center;gap: 1rem;} .search-box {display: flex;align-items: center;background: rgba(255,255,255,0.1);border-radius: 20px;padding: 0.25rem 0.75rem;} .search-input {background: none;border: none;outline: none;color: ${colors.text};padding: 0.25rem;} .search-btn {background: none;border: none;cursor: pointer;color: ${colors.text};} .social-links {display: flex;gap: 0.5rem;} .social-link {color: ${colors.text};text-decoration: none;font-size: 1.2rem;transition: transform 0.3s ease;} .social-link:hover {transform: scale(1.1);} .cta-button {background: ${colors.accent};color: white;border: none;padding: 0.5rem 1rem;border-radius: 5px;cursor: pointer;font-weight: 500;transition: background 0.3s ease;} .cta-button:hover {background: ${colors.accentHover};} .mobile-toggle {display: none;background: none;border: none;color: ${colors.text};font-size: 1.5rem;cursor: pointer;} .mobile-menu {display: none;flex-direction: column;gap: 1rem;padding: 1rem 0;border-top: 1px solid rgba(255,255,255,0.1);} .mobile-nav-link {color: ${colors.text};text-decoration: none;padding: 0.5rem 0;} .hero-header {text-align: center;padding: 4rem 0;background: linear-gradient(135deg, ${colors.bg}, ${colors.accent});} .hero-title {font-size: 3rem;margin-bottom: 1rem;color: ${colors.text};} .hero-subtitle {font-size: 1.2rem;margin-bottom: 2rem;color: ${colors.text};opacity: 0.8;} .hero-cta {background: white;color: ${colors.accent};border: none;padding: 1rem 2rem;border-radius: 5px;font-size: 1.1rem;font-weight: bold;cursor: pointer;transition: transform 0.3s ease;} .hero-cta:hover {transform: translateY(-2px);} .mega-nav {display: flex;justify-content: space-between;align-items: center;} .mega-brand {display: flex;align-items: center;gap: 0.5rem;font-size: 1.5rem;font-weight: bold;} .mega-menu {display: flex;gap: 2rem;} .mega-item {position: relative;} .mega-link {color: ${colors.text};text-decoration: none;font-weight: 500;padding: 0.5rem 1rem;display: block;transition: color 0.3s ease;} .mega-link:hover {color: ${colors.accent};} .mega-dropdown {position: absolute;top: 100%;left: 0;background: ${colors.bg};border: 1px solid rgba(255,255,255,0.1);border-radius: 5px;padding: 1rem;min-width: 200px;display: none;z-index: 1000;} .mega-item:hover .mega-dropdown {display: block;} .mega-column h4 {margin-bottom: 0.5rem;color: ${colors.text};} .mega-column a {display: block;color: ${colors.text};text-decoration: none;padding: 0.25rem 0;opacity: 0.8;} .mega-column a:hover {opacity: 1;color: ${colors.accent};} .basic-header {display: flex;justify-content: space-between;align-items: center;} .header-left {display: flex;align-items: center;gap: 1rem;} .header-nav {display: flex;gap: 2rem;} @media (max-width: 768px) {.navbar-nav {display: none;} .mobile-toggle {display: block;} .mobile-menu.active {display: flex;} .hero-title {font-size: 2rem;} .hero-subtitle {font-size: 1rem;} .mega-menu {display: none;} .header-nav {display: none;}} ${generateColorSchemes()}`;} function getColorScheme(config) {if (config.style === 'custom') {return {bg: config.bgColor,text: config.textColor,accent: '#007bff',accentHover: '#0056b3'};} const schemes = {light: {bg: '#ffffff',text: '#333333',accent: '#007bff',accentHover: '#0056b3'},dark: {bg: '#343a40',text: '#ffffff',accent: '#17a2b8',accentHover: '#138496'},transparent: {bg: 'rgba(255,255,255,0.95)',text: '#333333',accent: '#007bff',accentHover: '#0056b3'},gradient: {bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',text: '#ffffff',accent: '#ffffff',accentHover: 'rgba(255,255,255,0.8)'}};return schemes[config.style] || schemes.light;} function generateColorSchemes() {return `.header-gradient {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);} .header-transparent {background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);}`;} function generateHeaderJS(config) {return `function toggleMobileMenu() {const mobileMenu = document.getElementById('mobileMenu');mobileMenu.classList.toggle('active');} document.querySelectorAll('.nav-link, .mobile-nav-link').forEach(link => {link.addEventListener('click', function(e) {e.preventDefault();console.log('Navigate to:', this.textContent);});});document.querySelector('.search-btn')?.addEventListener('click', function() {const searchInput = document.querySelector('.search-input');if (searchInput.value.trim()) {console.log('Search for:', searchInput.value);}});document.querySelector('.cta-button, .hero-cta')?.addEventListener('click', function() {console.log('CTA clicked:', this.textContent);});`;} function previewHeader() {document.getElementById('header-preview').scrollIntoView({ behavior: 'smooth' });} function applyHeaderStyles(css) {let existingStyle = document.getElementById('header-styles');if (existingStyle) {existingStyle.remove();} const style = document.createElement('style');style.id = 'header-styles';style.textContent = css;document.head.appendChild(style);} function copyCode() {generatedCode.select();document.execCommand('copy');const originalText = copyBtn.textContent;copyBtn.textContent = 'Copied!';copyBtn.classList.add('btn-success');copyBtn.classList.remove('btn-outline-success');setTimeout(() => {copyBtn.textContent = originalText;copyBtn.classList.remove('btn-success');copyBtn.classList.add('btn-outline-success');}, 2000);} generateHeader();});