Hola a todos.
Agregué los códigos aquí a los campos requeridos, pero no funcionó. ¿Dónde me estoy equivocando?
También probé el plugin, pero rompe el área de la barra de búsqueda.
Hola a todos.
Agregué los códigos aquí a los campos requeridos, pero no funcionó. ¿Dónde me estoy equivocando?
También probé el plugin, pero rompe el área de la barra de búsqueda.
Hmmm, sí, sospecho que tendrás que hacer algo de trabajo extra de CSS para que la barra de encabezado funcione con enlaces.
Pregunta, ¿también estás desarrollando para móviles? Porque el encabezado en móvil tiene mucho menos espacio para añadir cosas. No querrás hacer un sitio de escritorio agradable y luego descubrir que tu vista móvil es un desastre.
No recuerdo ahora mismo, pero también puede haber una salida de plugin allí que puedas usar. ![]()
Hola Lilly.
Quiero hacer esto solo para escritorio.
La vista móvil está bien ahora, no quiero reducir el área del encabezado allí.
Si no sucede, por cierto, no es gran cosa. Este botón redirigirá a una categoría del foro.
Solo quería que ese botón diera un ambiente agradable.
¿Te refieres a un icono en esta área, por ejemplo?

¿Puedes explicar con más detalle qué buscas exactamente?
El punto de conexión del plugin aquí en esta área es before-header-panel.
Esto es utilizado por los componentes Custom Header Links y Header Search.
¡Custom Header Links es el camino a seguir!
Como dijo Lilly, necesitarás ajustar el CSS aquí.
Por lo que veo, el componente Header Links utiliza algo de CSS en el contenedor del punto de conexión, lo que puede explicar por qué rompe la búsqueda.
Si no le importa, ¿puede habilitar el componente nuevamente para que pueda mirar directamente en su foro?
Se explica aquí, pero cuando escribo los códigos necesarios, no funciona.
Ya lo he activado, puedes mirar, gracias por tu ayuda ![]()
¡Gracias!
Intenta añadir este CSS:
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
Cuando uso este código, se ve normal para el usuario anónimo. Pero no se ve normal para el usuario conectado. La razón son los códigos que usé para centrar la barra de búsqueda.
He iniciado sesión y se muestra como esperaba. Veo la búsqueda centrada. Vea mi captura de pantalla. ![]()
Sí, añadió manualmente margin-right: -35px; para compensar el panel de encabezados, y ahora, con el enlace, el valor necesita ser ajustado de nuevo.
Lo hago porque la barra de búsqueda no se mueve ni a la izquierda ni a la derecha para el miembro que ha iniciado sesión. La barra de búsqueda permanece en el mismo lugar tanto antes como después de iniciar sesión.
Pero parece que también afecta al plugin Custom Header Links. Creo que por ahora no pondré un botón allí. Si podemos añadirlo con CSS y HTML, me gustaría intentarlo.
Gracias por tu tiempo. ![]()
También puedes sacar la barra de búsqueda del flujo con posición absoluta.
Ya no necesitarás margin.
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* altura del encabezado - altura de búsqueda - margen - borde */
width: 100%;
}
Es posible que necesites añadir una consulta de medios para controlar el ancho en resoluciones más bajas y asegurarte de que no se superponga con otros elementos.
Esto es genial, muchas gracias, lo controlaré/verificaré. ![]()
Pero, cuando habilito los Enlaces de Encabezado Personalizados, la sección del encabezado no se ve normal.
Esto no es un gran problema. Solo quería agregar algo visual a la sección del encabezado.
Hola @Arkshine, me acabo de dar cuenta. Después de este código, no se puede hacer clic en el logo.
Creo que está relacionado con el código position: absolute;.
Puedes añadir ese CSS para que el logo se apile sobre la búsqueda.
.home-logo-wrapper-outlet {
z-index: 1;
}
Tienes otra solución para el CSS floating-search-input en lugar de lidiar con los lados (asegúrate de eliminar el CSS en floating-search-input-wrapper):
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
Muchas gracias Arkshine ![]()