Navbar limpia y sin dropdowns. Logo centrado o a la izquierda. Ideal para portfolios o páginas simples.
Descripción
La Navbar minimalista de Kodeval Pages es una barra de navegación horizontal (la fila de links que suele ir arriba de todo en una página). Es simple: no tiene menús desplegables, no tiene animaciones complicadas y no necesita ni una línea de JavaScript para funcionar.
Está armada con la etiqueta <nav>, que HTML usa justo para marcar "acá va la navegación". A la izquierda va el logo como un link. A la derecha va una lista (<ul> con <li> adentro) con los links del menú. Usar estas etiquetas ayuda a que Google entienda mejor tu página (SEO) y a que lectores de pantalla la puedan leer bien (accesibilidad).
La clase .navbar-link-active marca cuál es la página en la que está parado el usuario ahora mismo. Vos la escribís a mano en el HTML, en el link que corresponda. También se puede agregar con JavaScript si tu proyecto lo necesita. Si no la usás, la navbar igual funciona bien.
El link marcado como activo usa el color principal del proyecto, guardado en una variable CSS (un valor que definís una vez y reutilizás en todos lados, como --nav-active). Así el color siempre queda igual en toda la página. Además, ese link se ve un poco más grueso (negrita) para notarse todavía más.
La navbar usa "position: sticky" con "top: 0". Esto quiere decir que la barra queda pegada arriba de la pantalla aunque hagas scroll hacia abajo. Es útil en páginas largas, porque el usuario siempre tiene el menú a mano.
El "z-index: 100" es un número que le dice al navegador qué elemento va "más arriba" cuando dos se superponen. Con ese valor, la navbar siempre queda por encima del resto del contenido. Si tu proyecto tiene ventanas emergentes (modales) con un z-index más alto, capaz tenés que ajustar este número.
Adentro de .navbar hay variables CSS (valores reutilizables, como --nav-bg para el color de fondo) que te dejan cambiar colores, altura y tamaño de letra sin tocar el resto del código. Si solo cambiás --nav-bg y --nav-active, podés adaptar la navbar a los colores de cualquier proyecto.
El link activo tiene su propio color al pasar el mouse (hover), distinto del resto de los links. Así evitás que, al pasar el mouse por encima, cambie al color genérico y se pierda la marca de "página actual".
En pantallas chicas (celulares, hasta 560px de ancho) la lista de links se oculta con "display: none" (una propiedad CSS que hace desaparecer un elemento). Si necesitás un botón de menú (menú hamburguesa) para celular, podés sumarle un botón y unas líneas de JavaScript, o usar el módulo de menú mobile de Kodeval Pages junto con este.
La altura de la barra es fija (--nav-height: 60px) para que sea fácil de tocar tanto con mouse como con el dedo en el celular. Por dentro, usa flexbox (un sistema de CSS para acomodar elementos en fila o columna) con "align-items: center", así el logo y los links quedan alineados a la misma altura.
Este módulo sirve como punto de partida para portfolios, blogs personales, páginas de un producto o de documentación, y cualquier sitio que necesite un menú simple, sin submenús ni menús complicados.
Como el CSS no depende de nada externo, podés sumarlo a cualquier proyecto ya armado, use el framework que use (o ninguno). No agrega variables globales que puedan chocar con tu código, no necesita librerías externas ni herramientas de compilación (build tools).
Para usarlo, pegá el HTML del bloque de abajo donde quieras que aparezca la navbar (normalmente arriba de todo en el body). Pegá el CSS en tu archivo de estilos, o dentro de una etiqueta <style> en el head. No necesita nada más.
<nav class="navbar">
<div class="navbar-inner">
<a href="/" class="navbar-logo">Nombre</a>
<ul class="navbar-links">
<li><a href="#" class="navbar-link navbar-link-active">Inicio</a></li>
<li><a href="#" class="navbar-link">Trabajo</a></li>
<li><a href="#" class="navbar-link">Sobre mí</a></li>
<li><a href="#" class="navbar-link">Contacto</a></li>
</ul>
</div>
</nav>
/*
|--------------------------------------------------------------------------
| Navbar Minimalista — Kodeval Pages
|--------------------------------------------------------------------------
| Barra de navegación limpia sin dropdowns ni JavaScript.
| Ideal para portfolios, blogs o páginas de una sola sección.
| Incluye indicador de sección activa.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.navbar {
--nav-bg: #ffffff;
--nav-text: #0f172a;
--nav-muted: #64748b;
--nav-active: #5865f2;
--nav-border: #e2e8f0;
--nav-height: 60px;
}
/* =====================
BARRA PRINCIPAL
===================== */
.navbar {
background: var(--nav-bg);
border-bottom: 1px solid var(--nav-border);
height: var(--nav-height);
position: sticky;
top: 0;
z-index: 100;
}
/* =====================
CONTENEDOR INTERNO
===================== */
.navbar-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* =====================
LOGO
===================== */
.navbar-logo {
font-size: 1rem;
font-weight: 700;
color: var(--nav-text);
text-decoration: none;
letter-spacing: -0.02em;
}
/* =====================
LISTA DE LINKS
list-style:none elimina los puntos de lista.
===================== */
.navbar-links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
/* =====================
LINK INDIVIDUAL
===================== */
.navbar-link {
color: var(--nav-muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.4rem 0.75rem;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
display: block;
}
.navbar-link:hover {
color: var(--nav-text);
background: #f1f5f9;
}
/* =====================
LINK ACTIVO
Marcá la sección actual con la clase .navbar-link-active.
Podés hacerlo dinámicamente con JS o manualmente en el HTML.
===================== */
.navbar-link-active {
color: var(--nav-active);
font-weight: 600;
}
.navbar-link-active:hover {
color: var(--nav-active);
background: rgba(88,101,242,0.08);
}
/* =====================
RESPONSIVE
En móvil ocultamos los links.
===================== */
@media (max-width: 560px) {
.navbar-links { display: none; }
}