Encabezado de la marca

[Discourse]

	Resumen	Brand Header agrega un encabezado superior adicional para la marca con tu logotipo, enlaces de navegación e iconos de redes sociales, tanto para vistas móviles como de escritorio. El logotipo de la marca puede ser una imagen o texto.
	Vista previa	Vista previa en Discourse Theme Creator
	Enlace al repositorio	https://github.com/discourse/discourse-brand-header
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Dado que este es un #componente_de_tema #oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, bug, ux y #funcionalidad pueden realizarse en las categorías respectivas aquí en Meta, y etiquetarse con la etiqueta correspondiente del componente de tema. Haz clic en un enlace a continuación para iniciar uno.

 Soporte  Bug  UX  Funcionalidad

Características

Vista previa de escritorio:

Vista previa móvil:

Configuración

Nombre	Descripción
nombre de la marca
URL del sitio web
URL del logotipo móvil
enlaces	Enlaces de texto que se mostrarán en el encabezado
iconos	Enlaces de iconos que se mostrarán en el encabezado
iconos personalizados de Font Awesome	Lista de iconos de FontAwesome 6 utilizados en este componente de tema
mostrar barra en móvil
salida del complemento

Uso de iconos de Font Awesome 6

Para permitir que los iconos de Font Awesome 6 se muestren correctamente en este componente de tema, deberás agregarlos en 3 lugares de Discourse:

1. La configuración del sitio subconjunto de iconos SVG
2. La configuración iconos personalizados de Font Awesome en el componente
3. La configuración iconos en el componente

Además, para algunos iconos de Font Awesome 6, deberás especificar un prefijo fa o fab junto con el nombre del icono (por ejemplo: “fab-bluesky”), ya que algunos iconos forman parte de un subconjunto específico de iconos. Consulta Estamos actualizando nuestros iconos a Font Awesome 6! para obtener detalles sobre este uso.

Una vez que hayas agregado esos iconos en los tres lugares, deberías verlos correctamente mostrados en el componente de tema Brand Header.

¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y Empresarial Plus.

[angus (Angus McLeod)]

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

[permacultureProgram (Michael Pinkard)]

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

[hosna]

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

[smileypants707 (Chad Smiley)]

I’m curious, is there some sort of code I can use/edit to move the links to this side of the header?

Ideally with the fa-icons left in place (on the far right). I’d just like to see what it looks like.

[Stanzilla]

Hey there, would you be open to adding an option to display the bar below the header instead of above?

[vinothkannans (Vinoth Kannan)]

Sure, I will accept it if you can submit it in a PR.

[Stanzilla]

Any hints as to what needs to be changed for that? I never worked with Discourse before.

[vinothkannans (Vinoth Kannan)]

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

You should mount the widget in “below-site-header” connector instead of “above-site-header”. It will require few more tweaks too.

[Stanzilla]

Thanks, I got it to work! Will probably PR when I have a bit more time.

[vinothkannans (Vinoth Kannan)]

I merged your other PR which will add an optional target parameter to links.

https://github.com/discourse/discourse-brand-header/pull/4

[vinothkannans (Vinoth Kannan)]

@vinothkannans

Edit: To be more clear this is how I planned

This is now done in the commit below

FEATURE: render header inside hamburger menu in mobile devices. (#6)

[ClawdiaWolf (Claudia)]

I love this change, but on several sites where I use it personally, and on a hosted site I’m a moderator of (the NaNoWriMo forums) we’ve been seeing some issues. Unlike the regular hamburger menu, if you try to swipe it away it bounces back onto the screen.

I’ve personally seen this on a fully updated Moto (g7) Power on Android 9 and on a fully updated iPhone 8.

There has also been at least one report of the menu opening on touches near the icon and not just on it, but I’ve personally been unable to reproduce that particular behavior.

[Stanzilla]

Thanks! Turns out I did not have time to make a proper PR, do you think you’ll be able to add the below/above site header setting?

[aaronbauman]

Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.

[Rhidian (Rhidian Bramley)]

I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasn’t working as the menu still filled most of the screen.

I’ve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.

Would it be possible to make it more intuitive, either by:

• Auto-closing the menu when you click on a menu link on mobile devices?
• Including a ‘Close Menu’ button on mobile devices?

[jtbayly]

I’ve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.

[weber-s (Samuël Weber/GwendalD)]

Hola!

Estamos experimentando diferentes diseños entre dos versiones del mismo foro (discourse 3.2.0.beta4-dev y discourse 3.3.0.beta1-dev).

Aquí hay un ejemplo sin CSS personalizado, solo el componente sin procesar.

v3.2	v3.3

¿Ha cambiado el diseño HTML de Discourse entre las 2 versiones?

Además, el comportamiento de “deslizamiento” está roto en la v3.3.

[37Rb (Ryan)]

Tengo el mismo problema en Discourse 3.2.2. El comportamiento de deslizamiento está roto.

Brand header mobile menu doesn't fully expand until window resize

We’re having a problem where the brand header menu on the upper left only partially expands on mobile when tapped. We have it set to not display the bar on mobile. If I just tap the hamburger menu it looks like this. [Screenshot 2024-06-17 at 11.30.45 AM] But if I then resize the window in any direction it expands fully and shows all the sub-links. [Screenshot 2024-06-17 at 11.30.55 AM] How do I get it to expand fully when tapped without needed a window resize?

Me pregunto, viendo las fechas de las publicaciones anteriores, ¿el componente temático brand-header todavía tiene soporte?

[37Rb (Ryan)]

Basado en las 2 publicaciones anteriores, ha estado roto durante al menos 5 meses y nadie ha respondido. Asumiré que este componente temático está muerto a menos que alguien diga lo contrario.