Header
Esta es la estructura base de una cabecera de sitio web. Considera el uso del logo según el estándar corporativo, menú principal, menú superior con elementos auxiliares y buscador con interacción en pantallas grandes. El estilo es completamente responsivo.
HTML
<!-- Site Header -->
<header class="site-header">
<div class="container">
<!-- Mobile Menu Toggle -->
<button class="site-header__toggler-mobile-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</button>
<!-- Logo Mobile -->
<a href="/" class="site-header__logo-mobile">
<img src="/udec-frontend-library/dist/img/logo-udec-white.png" alt="Universidad de Concepción">
</a>
<!-- Topbar - Secondary Menu (Desktop only) -->
<nav class="site-header__topbar" aria-label="Secondary navigation">
<ul class="menu">
<li class="menu-item">
<a href="#">Noticias</a>
</li>
<li class="menu-item">
<a href="#">Agenda</a>
</li>
<li class="menu-item">
<a href="#">Directorio</a>
</li>
<li class="menu-item">
<a href="#">Biblioteca</a>
</li>
<li class="menu-item">
<a href="#">Correo UdeC</a>
</li>
</ul>
</nav>
<!-- Language & Search -->
<div class="site-header__language-search">
<!-- Search Toggle -->
<button class="site-header__toggle-search" aria-label="Search">
<img src="/udec-frontend-library/dist/img/icon-search.svg" alt="Search">
</button>
<!-- Search Form (hidden by default) -->
<form class="search-form" role="search">
<div class="search-form__container">
<input type="search" class="search-field" placeholder="Buscar..." aria-label="Search">
<button type="submit" class="search-submit" aria-label="Submit search">
<img src="../../dist/img/icon-search.svg" alt="Search">
</button>
</div>
<button type="button" class="search-close" aria-label="Close search">
<span>✕</span>
</button>
</form>
</div>
<!-- Navbar - Primary Menu -->
<nav class="site-header__navbar" aria-label="Primary navigation">
<div class="container">
<!-- Logo -->
<a href="/" class="site-header__navbar__logo">
<img src="/udec-frontend-library/dist/img/logo-udec-white.png" alt="Universidad de Concepción">
</a>
<!-- Menú -->
<ul class="menu">
<li class="menu-item current-menu-item">
<a href="#">Inicio</a>
</li>
<li class="menu-item">
<a href="#">Universidad</a>
</li>
<li class="menu-item">
<a href="#">Admisión</a>
</li>
<li class="menu-item">
<a href="#">Pregrado</a>
</li>
<li class="menu-item">
<a href="#">Postgrado</a>
</li>
<li class="menu-item">
<a href="#">Investigación</a>
</li>
<li class="menu-item">
<a href="#">Vinculación</a>
</li>
</ul>
</div>
</nav>
</div>
</header>