How to achieve this basic header layout in Pro?

[cglobal]

I’m looking to put together a header with this basic layout using the Pro header builder. The logo on the left needs to be full height, and then way over on the right side should be two stacked containers, the top most of which contains two items.

Picture a header with two bars, where the top one has some right-aligned elements like three-item inline menu, social icons, and search field, and the bottom bar has a logo aligned to the left and an inline nav menu aligned to the right. Except…the logo on the left should be full height, hence the two-column approach where the logo is on the left and the other elements on the right.

[nico]

Hi @cwsglobal,

Thanks for writing in.

In Pro, you need to create your header on your own however there is a template that you can start off.

From there, you can add or adjust according to the design that you want to achieve.

Let us know how it goes.

Thanks.

[cglobal]

Hi @nico,

Thanks. I understand how to build headers in Pro. Sorry…I should have been more clear. The issue is that I cannot find a way to create a header that has both 1) a container on the left (full height) for logo, and 2) two stacked containers on the right such that I can add an inline navigation menu to the lower container and more than one element to the top container.

The graphic I attached to my first post illustrates this. It wouldn’t be a problem if I only wanted one element stacked above another on the right.

Please let me know how I can accomplish this using the Pro header builder.

Thanks!

[christopher]

Hi there,

I suggest that you add the bar and containers as follows:

Add one bar.

Inside that bar add 2 containers. First one will be the parent of the logo on the left, and the second one will be the parent of all those stuff you will add at the right section.

In the Bar Flexbox section set the flex options to be row and make sure that the containers inside will space between. Something like this:

The first container flex options are not that important as it will have only one logo element.

The second container should have the flex options as columns, that way whatever you add inside the container will stack up as you prefer:

I strongly suggest that you take time and watch the videos below as it will give you detailed information regarding this:

Header and Footer Builder Overview | Themeco Docs

https://theme.co/apex/forum/t/elements-tips-and-tricks/214

Also for further reading about the CSS Flex display under the hood stuff, I suggest that you check this article:

A Complete Guide to Flexbox | CSS-Tricks

Thank you.

[cglobal]

@christopher.amirian, you’re not understanding the discrepancy here. What I am trying to achieve is this:

The search and a small nav menu go in the upper right, and the full nav menu goes in the lower right.

But…your instructions–and the other material that I have spent hours going through–says that I am limited to this, with no possibility of placing two items in the right column in their own columns so they appear side by side instead of stacked (the third item should be below the other two):

[rad]

Hi there,

There is no way you could stack two containers within a single row of a flex layout (I understand that you wish to accomplish to create two layouts within the single row). You could stack the elements but not the containers, hence, the provided instruction is still valid (but should be selected as ROW instead of the column), as you can only stack elements by choosing the ROW layout when you inspect the container.

There is no limit of how many items you could add to the container. But there is a limit to what container layout you could achieve within a header bar.

Example,

1. Add header bar and set its flex layout to columns
2. Add two containers, it will then become the right and left columns
3. Add logo to the left column and align it vertically
4. Inspect your right column and set its layout to ROW (this is the setting that will stack them)
5. Add your menu element and search element to the right column

BUT, with your provided screenshots from your initial post, it’s not possible. You have to add two header bar, and just make the logo overlaps to the second header bar. OR simply, add your first two elements in a text element as shortcode, it will be considered single element and it will stack to the next element.

Hope this helps.