Header - Nested Wrap option?

chrismcb6 · March 18

Hello,

Is it possible to have the nested wrap option available in a header builder?

I wish to have a logo on the left, then wrap on the right, within which is an inner wrap containing two icon boxes, with a menu below.

This type of layout is possible in a regular page builder, but I don't see the option for an inner wrap in the header builder.

Is it possible? If not, do you have a recommendation on how to achieve the same result?

Thanks

Phil · March 19

Hi,

Header Builder does not have a nested wraps option.

However, to achieve such a layout, you can use a negative margin or offset for the logo.

Best regards

chrismcb6 · March 19

Thanks - it's just not as clean.

Is there a reason why the header builder doesn't include a nested wrap?

Something that is planned to be implemented soon?

Phil · March 19

Header Builder has a different construction than BeBuilder page content.

Adding nested wraps would be very difficult and may cause many problems, so we do not plan to implement them.

Best regards

chrismcb6 · March 19

OK, understood.

How about allowing a list block - but with a horizontal layout?

That will allow for icons, content and links, but within an element that can be stacked on top of a menu block.

The horizontal layout of a list would be appreciated in general for the main builder too.

Phil · March 19

Can you explain that in more detail? Or maybe you have some project showing that?

I quite do not understand your concept, an what you described can be done with icon elements in my opinion.

Thanks

chrismcb6 · March 19

Hi Phil,

I'll try to explain further.

I wish to have a layout as shown in the above wireframe mock up.

Specifically, I wish to have a phone number and email link with icons above the main navigation menu - to the right of the logo.

By default, if I add more than one element to any wrap in the header builder, they sit "side by side", like this:

With some CSS overrides (flex-direction:column), I can get these to "stack", rather than sit "side by side", like this:

However I wish for the phone and email to be inline with each other - but since they are two separate "Icon Box" elements, they can't.

Another element in the default BeBuilder that is close to this is a "List" element. It allows for more than one item (phone and email in this case) along with custom links per item (phone number, email address) and custom icons (phone, envelope).

This would work with the above custom CSS to have one element in place of two, although the List element only shows vertical lists, like this:

Again, a quick bit of CSS on that vertical list (display:flex; gap:10;), could have it horizontal... which would be very useful in the main builder too:

Ultimately, if a "List" element can be added to the header builder, I can create custom CSS to make it display as needed.

Better yet, if you "upgrade" the "List" element to allow for horizontal display of the list AND allow wraps in the header to choose between "flex-direction: row" and "flex-direction:column", it can all be handled in the builder.

Phil · March 20

Alright, thanks for the explanation.

However, we probably will not introduce such options as they will complicate the whole construction and may be not as simple as you describe.

We can only suggest setting the logo as I mentioned or to Absolute position.

Best regards

chrismcb6 · March 20

Thanks, I'll work on doing something like that.

Header - Nested Wrap option?

Comments