Build the header around brand recognition, primary navigation, essential actions, and resilient mobile behavior.
This CMS Max header starter uses responsive Tailwind classes with placeholders for the logo, menu widget, and telephone action.
Customize before use
- Replace the logo URL, logo alt text, menu widget placeholder, telephone URL, and visible phone label.
- Confirm the menu is managed through the CMS Max Menu widget rather than duplicated static links.
- Remove the telephone action when it is not a primary customer workflow.
- Check focus order, dropdown keyboard behavior, sticky offset, wrapping, and mobile navigation.
- Test long menu labels and browser zoom before assigning the section to a live layout.
Starter markup
<header class="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md shadow-md transition-all duration-300 font-open-sans border-b border-gray-100">
<div class="max-w-screen-2xl mx-auto px-6 lg:px-8">
<div class="lg:grid grid-cols-2 min-[1440px]:grid-cols-[auto_1fr_auto] items-center gap-y-2 min-[1440px]:gap-y-0 min-[1440px]:gap-x-8 py-2 min-[1440px]:h-26"><a class="order-1 flex-shrink-0 transition-transform duration-300 justify-self-start" href="/"> <img src="[LOGO_URL]" alt="Logo" class="h-22 w-auto object-contain hidden lg:block"> </a>
<div class="order-3 min-[1440px]:order-2 col-span-2 min-[1440px]:col-span-1 w-full flex justify-center min-[1440px]:border-t-0 pt-2 min-[1440px]:pt-0">
[MENU_WIDGET_PLACEHOLDER] - Insert a header menu
</div>
<div class="order-2 min-[1440px]:order-3 justify-self-end flex items-center hidden lg:flex"><a href="tel:[PHONE_NUMBER]" class="group relative flex items-center gap-3 bg-gray-50 hover:bg-[#00A3D5] lg:border border-gray-200 hover:border-[#00A3D5] pl-2 pr-6 py-2 rounded-full transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
<div class="lg:flex items-center justify-center w-10 h-10 bg-white rounded-full shadow-sm group-hover:bg-[#39B64B] transition-colors duration-300"><svg class="w-5 h-5 text-[#00A3D5] group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
</path>
</svg></div>
<div class="flex flex-col text-left "><span class="text-xs font-semibold text-gray-500 uppercase tracking-wider group-hover:text-blue-100 transition-colors">Call Us</span> <span class="text-lg font-bold text-gray-800 font-red-hat-text group-hover:text-white transition-colors leading-none">[PHONE_NUMBER]</span></div>
</a></div>
</div>
</div>
</header>