Pro Header - Best Way to stack elements

[cforge]

I am using the pro header and trying to get a bar where the left is he logo and the right is a search box and beneath it a row of social icons. The problems I am running to are:

1. If I use separate bars to contain the search box and the social icons, the logo would need to span both. Don’t know how to do that so it works reliable responsively.

2. If I set the container within a single bar to Flex Layout = Column then that puts the first social icon beneath the search box like i want it. But adding more social icons then stack in a column where I want them to be in a row.

3. The elements themselves do not do anything when their flex layouts are altered.

So logo left, then to the right search box element with a row of social elements beneath it. Best way?

Thank you.

[cforge]

OK I figured out how the achieve this by organizing the elements into different containers. But I guess the remaining issue I have is how to make a logo span multiple bars?

[ruenel]

Hello There,

Thanks for writing in!

For more details about flex layouts, please check out this article: https://theme.co/apex/forum/t/using-flexbox/24851

To make the logo span in multiple bars, you will have to use a custom css. My suggestion would be that you create your header first with your logo and multiple bars in it. Once you are done with it, we can check it and give you a more tailored css code to make sure that the logo will expand in multiple bars.

Thanks for understanding.

[cforge]

OK here is the sandbox site (ugly black is just because I do not have the client’s final colors!): http://sandbox.nationalceliac.org/

I have a header with three bars. Top Bar, Search Bar and Navigation Bar. The Top Bar has the 4 buttons on the top.

The Search Bar has the logo and the search box. I would like to put a row of social icons above the search box and so I am thinking to add a 4th bar “Social Bar”.

The Navigation Bar is obvious.

So I envision 4 bars and the logo floating over the top 3 bars so that it is equal distance from the top of the first bar and bottom of the 3rd bar. The 4th bar would be beneath it all. Here is the idea:

I would want to float the logo itself over the Top Bar so that it is an equal distance between the top of the Top Bar and the bottom of the Search Bar (third bar). In this way if elements were later added to the top 3 bars, the logo would center itself vertically.

Here is an illustration: https://www.awesomescreenshot.com/image/3313285/00459cf846ad1cc6fa9fdafd32d1a14f

[rad]

Hi there,

I think all are possible except for the logo. I tried it and it’s limited to the flex layout where the logo is wrapped. And in order for that to work, I have to change the relative positioning and flex layout through custom CSS. And it’s a disaster, perhaps you can just add those header bar and just add the logo outside header bars (masthead) through the javascript? Then apply the CSS for positioning and overlapping.

Example,

jQuery('.masthead').append('<a href="" class="masthead_logo"><img src=""></a>');

Then the CSS will be,

.masthead {
position: relative;
}
.masthead_logo {
position: absolute;
bottom: 0;
left:0;
}

Then your topbar, search bar, and navigation bar can be a normal header bars where you can add any elements you want

Thanks!

[cforge]

Thanks. I gave it a try, inserting the javascript statement in the header custom js and ran it with my logo url and the css and no logo. Unless I am not understanding what you mean, I’ll have to search for another way. Thanks.

[friech]

Hi There,

Yes, this is a tricky one, I did try to solve this with just in Flexbox capability but this seems to be one of the flexbox limitations as the solution will always involve a custom CSS. One solution that I came up is to layout a 3 Container Bar (Topbar, Search bar, Social) like you normally would, and have them the Horizontal Flex Layout to End (so the elements will positioned to the right).

Then add the Image/logo in the middle Container and position it to the left with a custom CSS. The CSS property that can possibly do this is the position: absolute;, note that you need to apply this to the Image’s Element CSS, not on the Container.

We like to continue on helping you on this but since this requires further complex custom CSS it falls outside the scope of our support.

Thank you for understanding,
Cheers!

[cforge]

Thanks. I think this solution works fine. I’ve needed to add a fourth bar but moving the logo bar below it and having it go over the top 2 still seems to work as long as I mess with the absolute column height and padding for the logo row. Thank you.

[friech]

You’re welcome, glad we could help.

Cheers!