The brand/title element in the header shifts based on surrounding elements

[asuwebdesign]

In the header, the contents before and after the brand/title element (middle section) can negatively impact the composition. The brand/title element should remain centered in the header regardless of its surrounding content.

For product use, we are using the technology icon for the brand element. Ideally, this icon never shifts away from the absolute center position. Attaching a screenshot for reference.

[rebeccaalpert]

The fact that anyone can put whatever they want in here makes it hard to force it into the center. We can probably add a prop for a grid layout if we know there's N number of options, but we should probably keep the flex layout as an option as well.

[rebeccaalpert]

I took a look at this and we're using a grid layout here already.

What they can do as a workaround is apply a custom class to the title component with position: absolute; left: 0; width: 100%. I think it's unlikely that we want to ship an absolute positioned logo as part of the extension because consumers can put any logo they want and any content they want. There's no way to control for it working in every context, and we'll get a lot of bug reports about it.

There are other ways to accomplish this, like using the image as a background image, but we would need to know the logo in advance (and its width), which is likewise impossible in this context.

I think this may be outside of the scope of what we can provide given that we have no control over image sizes, what goes in the header, etc. However, I did confirm that everything in the header accepts outside classes, so products can customize this as needed for their use case.

I'd like to bring this up for discussion at our weekly meeting - you're more than welcome to attend. I'll close this or not based on the outcome of that call.