Chapter 13: Split Navigation
How to create a Split Navigation (also called split header, centered logo navigation, navigation with logo in the middle, or split menu).
What is a Split Navigation?
It is a top navigation bar where:
- The logo / brand name is placed in the center
- The menu links are split into two groups:
- left side of the logo
- right side of the logo
- It creates a very balanced, symmetrical, and modern look
- Very popular in 2024–2026 for creative agencies, portfolios, premium SaaS landing pages, personal brands, and lifestyle / fashion websites
Typical layout:
text
|
0 1 2 3 4 5 6 |
[ About ] [ Services ] [ Logo ] [ Blog ] [ Contact ] [ Login ] |
When the screen gets smaller → it usually collapses to a classic left-logo + hamburger menu.
Let’s build it properly — from clean basics to responsive production-ready version.
Step 1 – Basic HTML Structure (the most important part)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<header class="header"> <nav class="split-nav container"> <!-- Left menu items --> <ul class="nav-left"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Work</a></li> </ul> <!-- Center logo --> <div class="logo-center"> <a href="/" class="logo"> <img src="https://via.placeholder.com/160x48/000/fff?text=LOGO" alt="Brand"> <!-- or pure text: <strong>Studio</strong> --> </a> </div> <!-- Right menu items --> <ul class="nav-right"> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#" class="btn-primary">Get in Touch</a></li> </ul> <!-- Mobile hamburger --> <button class="hamburger" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </nav> <!-- Mobile menu (hidden by default) --> <div class="mobile-menu" hidden> <ul> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#" class="btn-primary">Get in Touch</a></li> </ul> </div> </header> |
Important observation:
We have three main parts inside the nav:
- left list
- center logo
- right list
This is the key to making the split work.
Step 2 – CSS (making the split beautiful)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
/* Reset & basics */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; } /* Header */ .header { position: sticky; top: 0; z-index: 1000; background: white; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .split-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 1.4rem 2rem; } /* Logo in center */ .logo-center { position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; } .logo img { height: 48px; width: auto; display: block; } /* Left & right menus */ .nav-left, .nav-right { display: flex; align-items: center; list-style: none; gap: 2.8rem; } .nav-left { margin-right: auto; /* pushes everything else right */ } .nav-right { margin-left: auto; /* pushes everything else left */ } .nav-left a, .nav-right a { color: #1f2937; text-decoration: none; font-weight: 500; padding: 0.5rem 0; transition: color 0.15s; } .nav-left a:hover, .nav-right a:hover { color: #2563eb; } .btn-primary { background: #2563eb; color: white; padding: 0.65rem 1.4rem; border-radius: 6px; font-weight: 500; } /* Hamburger (mobile only) */ .hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 0.5rem; } .hamburger span { width: 28px; height: 3px; background: #111827; border-radius: 2px; transition: all 0.3s; } /* Mobile menu */ .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border-top: 1px solid #e5e7eb; padding: 2rem 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .mobile-menu ul { list-style: none; } .mobile-menu a { display: block; padding: 1.1rem 0; font-size: 1.15rem; color: #111827; text-decoration: none; } /* Responsive breakpoints */ @media (max-width: 1024px) { .split-nav { padding: 1.2rem 1.5rem; } .nav-left, .nav-right, .logo-center { display: none; } .hamburger { display: flex; margin-left: auto; } .mobile-menu.active { display: block; } } /* Optional: make logo smaller on mobile */ @media (max-width: 768px) { .logo-center { position: static; transform: none; margin: 0 auto; } .logo img { height: 40px; } } |
Step 3 – JavaScript (mobile menu toggle)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
document.addEventListener('DOMContentLoaded', () => { const hamburger = document.querySelector('.hamburger'); const mobileMenu = document.querySelector('.mobile-menu'); hamburger.addEventListener('click', () => { mobileMenu.classList.toggle('active'); hamburger.classList.toggle('active'); }); // Optional: close when clicking links document.querySelectorAll('.mobile-menu a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.remove('active'); hamburger.classList.remove('active'); }); }); }); |
Add CSS for nice X animation:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } |
Important Variations & Real-World Decisions
| Variation | When to use it | How to implement it |
|---|---|---|
| Logo is text instead of image | Minimalist brands | Just use <strong>Studio</strong> or <h1> |
| Equal number of items left & right | Perfect symmetry desired | Balance number of <li> elements |
| One side has more items | Common in practice | The flex layout still works fine |
| CTA button only on right | Most common | Put btn-primary only in .nav-right |
| No logo — just split text | Very editorial / artistic sites | Remove .logo-center, use two equal <ul> |
| Sticky + shrink on scroll | Long pages | position: sticky + JS scroll class |
Common Problems & Fixes
| Problem | Solution |
|---|---|
| Logo overlaps menu items on narrow screens | Use position: absolute + left: 50% + transform |
| Logo disappears on mobile | Make .logo-center position: static on mobile |
| Uneven spacing | Use gap consistently + margin-left/right: auto |
| Mobile menu looks bad | Make it full-screen or centered list with larger text |
Would you like to go deeper into any of these next topics?
Examples:
- Split nav with mega dropdown on hover
- Split nav that becomes centered logo + hamburger on tablet
- Animated underline that follows the active link
- Sticky + shrinking version on scroll
- Split nav with search icon that expands
- How to handle unequal number of items left/right elegantly
- Dark mode / transparent header version
Just tell me which direction you want — I’ll explain it slowly with complete code examples. 😊
