Implementar navbar sticky con Bootstrap 5 y animaciones - Issue #7
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>
This commit is contained in:
FrankZamora
@@ -1,9 +1,9 @@
|
||||
<?php
|
||||
/**
|
||||
* The header template file
|
||||
* The header for our theme
|
||||
*
|
||||
* This template displays the site header including the opening HTML tags,
|
||||
* the site navigation, and the header content.
|
||||
* 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
|
||||
@@ -22,111 +22,77 @@
|
||||
<body <?php body_class(); ?>>
|
||||
<?php wp_body_open(); ?>
|
||||
|
||||
<!-- Skip to main content link for accessibility -->
|
||||
<!-- 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">
|
||||
|
||||
<!-- Sticky Header -->
|
||||
<header id="masthead" class="site-header" role="banner">
|
||||
<div class="header-inner container">
|
||||
<!-- Navbar Sticky con Bootstrap 5 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 border-bottom">
|
||||
<div class="container">
|
||||
|
||||
<!-- Site Branding / Logo -->
|
||||
<div class="site-branding">
|
||||
<!-- Logo / Site Title -->
|
||||
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<?php
|
||||
if ( has_custom_logo() ) :
|
||||
if ( has_custom_logo() ) {
|
||||
the_custom_logo();
|
||||
else :
|
||||
} else {
|
||||
?>
|
||||
<div class="site-identity">
|
||||
<?php if ( is_front_page() && is_home() ) : ?>
|
||||
<h1 class="site-title">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
|
||||
<?php bloginfo( 'name' ); ?>
|
||||
</a>
|
||||
</h1>
|
||||
<?php else : ?>
|
||||
<p class="site-title">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
|
||||
<?php bloginfo( 'name' ); ?>
|
||||
</a>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
$description = get_bloginfo( 'description', 'display' );
|
||||
if ( $description || is_customize_preview() ) :
|
||||
?>
|
||||
<p class="site-description"><?php echo esc_html( $description ); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<b><?php bloginfo( 'name' ); ?></b>
|
||||
<?php
|
||||
endif;
|
||||
}
|
||||
?>
|
||||
</div><!-- .site-branding -->
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav id="site-navigation" class="main-navigation desktop-nav" role="navigation" aria-label="<?php esc_attr_e( 'Primary Navigation', 'apus-theme' ); ?>">
|
||||
<!-- 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
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_id' => 'primary-menu',
|
||||
'menu_class' => 'primary-menu',
|
||||
'container' => false,
|
||||
'fallback_cb' => false,
|
||||
)
|
||||
);
|
||||
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
|
||||
}
|
||||
?>
|
||||
</nav><!-- #site-navigation -->
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Toggle (Hamburger) -->
|
||||
<button
|
||||
id="mobile-menu-toggle"
|
||||
class="mobile-menu-toggle"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="<?php esc_attr_e( 'Toggle mobile menu', 'apus-theme' ); ?>"
|
||||
>
|
||||
<span class="hamburger-icon" aria-hidden="true">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</span>
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'apus-theme' ); ?></span>
|
||||
</button>
|
||||
|
||||
</div><!-- .header-inner -->
|
||||
</header><!-- #masthead -->
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div id="mobile-menu-overlay" class="mobile-menu-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<nav id="mobile-menu" class="mobile-menu" role="navigation" aria-label="<?php esc_attr_e( 'Mobile Navigation', 'apus-theme' ); ?>" aria-hidden="true">
|
||||
<div class="mobile-menu-header">
|
||||
<span class="mobile-menu-title"><?php esc_html_e( 'Menu', 'apus-theme' ); ?></span>
|
||||
<button
|
||||
id="mobile-menu-close"
|
||||
class="mobile-menu-close"
|
||||
aria-label="<?php esc_attr_e( 'Close menu', 'apus-theme' ); ?>"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_id' => 'mobile-primary-menu',
|
||||
'menu_class' => 'mobile-primary-menu',
|
||||
'container' => false,
|
||||
'fallback_cb' => false,
|
||||
)
|
||||
);
|
||||
?>
|
||||
</nav><!-- #mobile-menu -->
|
||||
</div><!-- .container -->
|
||||
</nav><!-- .navbar -->
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div id="content" class="site-content">
|
||||
|
||||
Reference in New Issue
Block a user