Files
roi-theme/assets/css/componente-navbar.css
FrankZamora bbc6ed2c98 Refactor: Reorganizar repositorio - Solo tema WordPress
Se movió el repositorio git desde la raíz de WordPress a la carpeta del tema.
Este commit limpia todos los archivos de WordPress del historial de tracking
y mantiene únicamente los archivos del tema apus-theme.

Cambios:
- Eliminado tracking de archivos de WordPress core
- Mantenido solo archivos del tema (97 archivos)
- Actualizado .gitignore para excluir carpetas de desarrollo
- Historial de commits anteriores se mantiene intacto

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 09:15:47 -06:00

145 lines
3.1 KiB
CSS

/**
* Navbar Styles
*
* RESPONSABILIDAD: Estilos del componente de navegación principal
* - Navbar sticky
* - Navbar brand
* - Nav links y efectos hover
* - Dropdown menu
* - Dropdown items
*
* @package Apus_Theme
* @since 1.0.7
* @source apus-theme-template/css/style.css
*/
/* ========================================
Navbar Principal
======================================== */
.navbar {
position: sticky;
top: 0;
z-index: 1030;
background-color: var(--color-navy-primary) !important;
box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
padding: 0.75rem 0;
transition: all 0.3s ease;
}
.navbar.scrolled {
box-shadow: 0 6px 20px rgba(30, 58, 95, 0.25);
}
/* ========================================
Navbar Brand
======================================== */
.navbar-brand {
color: #ffffff !important;
font-weight: 700;
font-size: 1.5rem;
transition: color 0.3s ease;
}
.navbar-brand:hover {
color: var(--color-orange-primary) !important;
}
/* ========================================
Nav Links
======================================== */
.nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
position: relative;
padding: 0.5rem 0.65rem !important;
transition: all 0.3s ease;
font-size: 0.9rem;
white-space: nowrap;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 2px;
background: var(--color-orange-primary);
transition: transform 0.3s ease;
}
.nav-link:hover {
color: var(--color-orange-primary) !important;
background-color: rgba(255, 133, 0, 0.1);
border-radius: 4px;
}
.nav-link:hover::after {
transform: translateX(-50%) scaleX(1);
}
/* ========================================
Dropdown Menu
======================================== */
.dropdown-menu {
background: #ffffff;
border: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-radius: 8px;
padding: 0.5rem 0;
max-height: 70vh;
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-gray-400) transparent;
}
/* Webkit browsers (Chrome, Safari, Edge) scrollbar */
.dropdown-menu::-webkit-scrollbar {
width: 6px;
}
.dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background-color: var(--color-gray-400);
border-radius: 3px;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
background-color: var(--color-gray-500);
}
/* ========================================
Dropdown Items
======================================== */
.dropdown-item {
color: var(--color-neutral-600);
padding: 0.5rem 1.25rem;
transition: all 0.3s ease;
font-weight: 500;
}
.dropdown-item:hover {
background-color: rgba(255, 133, 0, 0.1);
color: var(--color-orange-primary);
}
/* ========================================
Dropdown Hover (Desktop Only)
======================================== */
@media (min-width: 992px) {
.nav-item:hover > .dropdown-menu {
display: block;
}
}