5440f23512
Implementación completa de navbar sticky con menú hamburguesa responsive según especificaciones del template del cliente: **Archivos Modificados:** - header.php: Reescritura completa con navbar Bootstrap 5, sticky positioning, y responsive hamburger menu - functions.php: Agregado require para nav-walker.php - inc/enqueue-scripts.php: Agregado enqueue de custom-style.css y main.js **Archivos Creados:** - assets/css/custom-style.css: Estilos navbar con animaciones (gradient underline, dropdown slideDown, etc.) - assets/js/main.js: JavaScript para scroll effect, active menu highlight, y mobile auto-close - inc/nav-walker.php: Bootstrap 5 Nav Walker para dropdowns WordPress **Características:** ✅ Navbar sticky con transición de sombra al hacer scroll ✅ Gradient underline animation en hover de nav-links ✅ Dropdown menus con animación slideDown ✅ Menú hamburguesa responsive (< 991px) ✅ Auto-close mobile menu al hacer click en enlaces ✅ Active menu item highlighting ✅ Smooth scroll para anchor links ✅ Skip link para accesibilidad ✅ Compatible con WordPress menu system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
99 lines
2.7 KiB
PHP
99 lines
2.7 KiB
PHP
<?php
|
|
/**
|
|
* The header for our theme
|
|
*
|
|
* Navbar sticky con Bootstrap 5.3.2 y animaciones según template del cliente.
|
|
* Incluye: sticky positioning, gradient animations, responsive hamburger menu.
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
<head>
|
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link rel="profile" href="https://gmpg.org/xfn/11">
|
|
<?php wp_head(); ?>
|
|
</head>
|
|
|
|
<body <?php body_class(); ?>>
|
|
<?php wp_body_open(); ?>
|
|
|
|
<!-- Skip to main content link para accesibilidad -->
|
|
<a class="skip-link screen-reader-text" href="#main-content">
|
|
<?php esc_html_e( 'Skip to content', 'apus-theme' ); ?>
|
|
</a>
|
|
|
|
<div id="page" class="site">
|
|
|
|
<!-- Navbar Sticky con Bootstrap 5 -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 border-bottom">
|
|
<div class="container">
|
|
|
|
<!-- Logo / Site Title -->
|
|
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
|
<?php
|
|
if ( has_custom_logo() ) {
|
|
the_custom_logo();
|
|
} else {
|
|
?>
|
|
<b><?php bloginfo( 'name' ); ?></b>
|
|
<?php
|
|
}
|
|
?>
|
|
</a>
|
|
|
|
<!-- Hamburger Toggle Button (Bootstrap 5) -->
|
|
<button class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="<?php esc_attr_e( 'Toggle navigation', 'apus-theme' ); ?>">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Collapsible Menu -->
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<?php
|
|
if ( has_nav_menu( 'primary' ) ) {
|
|
wp_nav_menu(
|
|
array(
|
|
'theme_location' => 'primary',
|
|
'container' => false,
|
|
'menu_class' => 'navbar-nav ms-auto mb-2 mb-lg-0',
|
|
'fallback_cb' => false,
|
|
'depth' => 2,
|
|
'walker' => new WP_Bootstrap_Navwalker(),
|
|
)
|
|
);
|
|
} else {
|
|
// Fallback si no hay menú asignado
|
|
?>
|
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
|
<?php esc_html_e( 'Home', 'apus-theme' ); ?>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="<?php echo esc_url( get_post_type_archive_link( 'post' ) ); ?>">
|
|
<?php esc_html_e( 'Blog', 'apus-theme' ); ?>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<?php
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
</div><!-- .container -->
|
|
</nav><!-- .navbar -->
|
|
|
|
<!-- Main Content Area -->
|
|
<div id="content" class="site-content">
|