La barra de navegación Sticky de anuncios se mantiene visible en la parte superior de la página cuando los usuarios se desplazan hacia abajo, mejorando la usabilidad y la accesibilidad. Hacerlo transparente agrega un toque de diseño moderno y elegante. En esta guía, mostraremos cómo crear una barra de navegación transparente pegajosa en el marco de Genesis de WordPress. En mi artículo anterior, he mencionado que he creado un sitio web de salud llamado Abhishekgheh.com para mis pacientes en el lenguaje bengalí/bengalí. Si observa la captura de pantalla del sitio web, se dará cuenta de que la transparencia en toda la barra de navegación no es la misma: la parte media es translúcida, por lo que los enlaces del sitio del sitio y la navegación son completamente visibles incluso cuando el texto está debajo. He usado el último tema infantil (al escribir este artículo) Genesis Sample (disponible en GitHub) para construir lentamente mi sitio web personalizado. El tema infantil ya tenía un menú de navegación pegajosa, que redujo mi trabajo. ¿Cómo he hecho el menú de navegación translúcido selectivamente? En mi caso, acabo de modificar el archivo style.css a este: .Site-Header {fondo: RGB (255,255,255); Antecedentes: gradiente lineal (86deg, RGBA (255,255,255,1) 26%, RGBA (255,255,255,0.8540208319655987) 46%, RGBA (255,255,255,1) 80%, RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,1) 100%, RGBA (255,255,2555,1) 100%, RGBA (255,255,255,0.7643844977623862) 100%, 100%, 100%. RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,0.9100432409291842) 100%, RGBA (255,255,255,0) 100%, RGBA (255,255,255,255,1) 100%); Shadow de caja: 0 0 20px RGBA (0, 0, 0, 0.05); relleno: 0 30px; } .site-header {fondo: RGB (255,255,255); Antecedentes: gradiente lineal (86deg, RGBA (255,255,255,1) 26%, RGBA (255,255,255,0.8540208319655987) 46%, RGBA (255,255,2555,1). RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,1) 100%, RGBA (255,255,2555,1) 100%, RGBA (255,255,255,0.7643844977623862) 100%, 100%, 100%. RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,0.9100432409291842) 100%); Box-Shadow: 0 0 20px RGBA (0, 0, 0, 0.05); relleno: 0 30px;} He usado la herramienta CSSgradient.io para generar el gradiente. Es un gradiente lineal de CSS, también podría usar un gradiente radial. Entonces, mi caso de uso fue bastante fácil porque el tema del niño estaba listo para hacerse moderno. ¿Cómo lo harás para que el menú de navegación sea translúcido? Si su tema Genesis no aplica automáticamente la clase .site-Header (ese es probablemente el caso más raro), agregue el siguiente fragmento a sus funciones. función custom_genesis_site_header ($ atributes) {$ atributos[‘class’] . = ‘Header de sitio’; devolver $ atributos; } add_filter (‘genesis_attr_site-header’, ‘custom_genesis_site_header’); function custom_genesis_site_header ($ atributes) {$ atributos[‘class’] . = ‘Header de sitio’; devolver $ atributos;} Si desea detectar eventos de desplazamiento (en caso de que desee hacerlo translúcido después de que el usuario se desplace hacia abajo). Genesis no proporciona soporte incorporado para detectar eventos de desplazamiento, por lo que necesitamos agregar JavaScript personalizado. Puede cargar un archivo JavaScript personalizado como este (puede usar la función de Genesis para inyectar script o encabezado y complemento de pie de página): function ($) {$ (documento) .ader (function () {$ (window) .on («scroll», function () {if ($ (window) .scrolltop ()> 50) {$ («. Sitio-header»). AddClass («Scrolled»); $ («. Sitio-Header»). RemoveClass («Scrolled»); }) (jQuery); function ($) {$ (documento) .Ready (function () {$ (window) .on («scroll», function () {if ($ (window) .scrolltop ()> 50) {$ («. sitio-header»). addClass («scrolled»);} else {$ ($ («. Sitio-Header»). });});}) (jQuery); Este script detecta cuando el usuario se desplaza más allá de 50 píxeles, y luego agrega la clase desplazada para cambiar el color de fondo. Para hacer que la barra de navegación Genesis sea pegajosa y transparente, agregue/modifique el CSS al archivo de estilo.css de su tema: .Site-Header {posición: fijo; Ancho: 100%; arriba: 0; Izquierda: 0; Índice Z: 999; Antecedentes: RGBA (255, 255, 255, 0.8); / * Ajustar la transparencia */ Transición: fondo 0.3s Facilización de facilidad; } .site-header.scrolled {fondo: rgba (255, 255, 255, 1); / * Fondo sólido cuando se desplaza */ Box-Shadow: 0 2px 5px RGBA (0, 0, 0, 0.1); } cuerpo {Padding-top: 80px; / * Evita que el contenido se oculte debajo del encabezado fijo */} 123456789101112131415161718.site-header {posición: fijo; Ancho: 100%; arriba: 0; Izquierda: 0; Índice Z: 999; Antecedentes: RGBA (255, 255, 255, 0.8); / * Ajustar la transparencia */ Transición: fondo 0.3s facilitante;} .site-header.scrolled {fondo: rgba (255, 255, 255, 1); / * Fondo sólido cuando se desplazó */ box-shadow: 0 2px 5px rgba (0, 0, 0, 0.1);} cuerpo {almohadilla: 80px; / * Evita que el contenido se oculte debajo del encabezado fijo */} siguiendo estos pasos, tendrá una barra de navegación pegajosa y transparente en el marco Genesis que mejora el diseño y la funcionalidad. Puede ajustar el CSS para diferentes esquemas de color y ajustar el JavaScript según sea necesario.