Free
Navbar
Corevia Navbar
A navbar block extracted from the Corevia template, available in Tailwind CSS and Bootstrap.
0
4
corevia.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corevia Navbar | Tailwind CSS UI Block</title>
<meta name="description" content="A navbar block extracted from the Corevia template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Corevia, Tailwind CSS template, HTML website template, fitness template, gym website, personal trainer, coaching programs, membership pricing, workout tracker, health club">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Corevia | Tailwind CSS Health & Fitness Template">
<meta property="og:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Corevia template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Corevia | Tailwind CSS Health & Fitness Template">
<meta name="twitter:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Corevia template preview">
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { flame: { DEFAULT: '#f26b38', deep: '#d9551f' }, coal: { DEFAULT: '#0e0e0e', soft: '#232323' }, mist: '#f3f3f3' },
fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['"Instrument Serif"', 'serif'] }
}
}
}
</script>
<style>
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.swap { transition: opacity .35s ease; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.swap { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-white font-sans text-coal antialiased">
<!-- preview canvas: shows overlay navbars on the original hero surface -->
<div class="block-preview-canvas bg-coal" style="position:relative;min-height:12rem">
<% active_page = "index" %>
<% nav = { "index" => "Home", "about" => "About Us", "services" => "Services", "testimonials" => "Testimonials" } %>
<!-- block:start navbar -->
<header class="<%= active_page == 'index' ? 'absolute inset-x-0 top-0' : 'relative bg-coal' %> z-40 text-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-6 md:px-10" aria-label="Main">
<a href="index.html" class="flex items-center gap-2 text-2xl font-semibold"><span class="grid h-9 w-9 place-items-center rounded-lg bg-flame"><i class="fa-solid fa-dumbbell text-sm" aria-hidden="true"></i></span>Corevia</a>
<ul class="hidden items-center gap-7 text-sm lg:flex">
<% nav.each do |slug, label| %>
<% active = active_page == slug %>
<li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="transition <%= active ? 'font-semibold text-white' : 'text-white/80 hover:text-white' %>"><%= label %></a></li>
<% end %>
</ul>
<div class="flex items-center gap-3">
<a href="contact.html" class="hidden rounded-full bg-flame px-5 py-3 text-xs font-semibold uppercase tracking-wide transition hover:bg-flame-deep sm:inline-block">Start your journey</a>
<button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" class="grid h-11 w-11 place-items-center rounded-full bg-white/15 backdrop-blur lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars" aria-hidden="true"></i></button>
</div>
</nav>
<div id="mobile-menu" class="mx-5 hidden rounded-2xl bg-coal p-5 lg:hidden">
<ul class="grid gap-1 text-lg">
<% nav.merge("pricing" => "Pricing", "contact" => "Contact").each do |slug, label| %>
<% active = active_page == slug %>
<li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="block rounded-xl px-4 py-3 <%= active ? 'bg-flame' : 'hover:bg-white/10' %>"><%= label %></a></li>
<% end %>
</ul>
</div>
</header>
<!-- block:end navbar -->
</div>
<script>
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;
document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
const menu = document.getElementById(button.getAttribute('aria-controls'));
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!open));
menu.classList.toggle('hidden', open);
});
});
document.querySelectorAll('[data-video]').forEach((dialog) => {
document.querySelectorAll('[data-video-open]').forEach((button) => button.addEventListener('click', () => dialog.showModal()));
dialog.querySelector('[data-video-close]').addEventListener('click', () => dialog.close());
dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close(); });
});
document.querySelectorAll('[data-carousel], [data-rail]').forEach((root) => {
const track = root.querySelector('[data-carousel-track], [data-rail-track]');
const step = () => track.children[1].getBoundingClientRect().width + 20;
const go = (dir) => {
const max = track.scrollWidth - track.clientWidth - 4;
if (dir > 0 && track.scrollLeft >= max) track.scrollTo({ left: 0, behavior: reducedMotion ? 'auto' : 'smooth' });
else if (dir < 0 && track.scrollLeft <= 4) track.scrollTo({ left: track.scrollWidth, behavior: reducedMotion ? 'auto' : 'smooth' });
else track.scrollBy({ left: dir * step(), behavior: reducedMotion ? 'auto' : 'smooth' });
};
root.querySelector('[data-carousel-prev], [data-rail-prev]').addEventListener('click', () => go(-1));
root.querySelector('[data-carousel-next], [data-rail-next]').addEventListener('click', () => go(1));
});
document.querySelectorAll('[data-services]').forEach((root) => {
const cards = [...root.querySelectorAll('[data-service]')];
const set = (card) => cards.forEach((other) => other.setAttribute('aria-current', String(other === card)));
cards.forEach((card) => { card.addEventListener('mouseenter', () => set(card)); card.addEventListener('focus', () => set(card)); });
});
document.querySelectorAll('[data-tracker]').forEach((root) => {
const data = JSON.parse(root.querySelector('[data-routine-data]').textContent);
const tabs = [...root.querySelectorAll('[data-routine]')];
tabs.forEach((tab) => tab.addEventListener('click', () => {
tabs.forEach((other) => other.setAttribute('aria-selected', String(other === tab)));
const item = data[tab.dataset.routine];
root.querySelector('[data-track-label]').textContent = item.text;
root.querySelector('[data-track-score]').textContent = item.score;
root.querySelector('[data-track-delta]').textContent = item.delta;
const bar = root.querySelector('[data-track-bar]');
bar.style.width = `${item.percent}%`;
bar.parentElement.setAttribute('aria-valuenow', String(item.percent));
}));
});
document.querySelectorAll('[data-pricing]').forEach((root) => {
const toggle = root.querySelector('[data-annual]');
toggle.addEventListener('change', () => {
root.querySelectorAll('[data-price]').forEach((price) => { price.textContent = toggle.checked ? price.dataset.annual : price.dataset.monthly; });
root.querySelector('[data-billing-note]').textContent = toggle.checked ? 'Billed yearly — you save 20%. Cancel anytime.' : 'Billed monthly. Cancel anytime.';
});
});
document.querySelectorAll('[data-newsletter]').forEach((form) => {
const status = form.parentElement.querySelector('[data-form-status]');
form.addEventListener('submit', (event) => {
event.preventDefault();
const email = form.querySelector('[name="email"]');
if (!email.value.trim() || !email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
status.textContent = "You're in! Look out for your first workout this week.";
form.reset();
});
});
if (watchMotion) {
document.documentElement.classList.add('reveal-ready');
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
}), { threshold: 0.15 });
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
}
</script>
</body>
</html>
From this template
Health & Fitness
Corevia
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
$20
/ 3 months
or $60 / year
Get Unlimited Access