Double Button Row Header Builder

Hello all,

I am in the final stages of completing another site with Apex Pro.

All is well except for one issue I can’t seem to figure out: I need to get two buttons on the same line of my header, below an image and a few lines of text. – The header is laid out just like I want it, minus one button.

I’ve referenced some other threads in the forum and followed the steps therein with little success. They all seem to be doing something different than what I’m needing. I tried changing rows, columns, containers, flex… etc…
I don’t know, maybe I did it wrong.

You can see the site here: takenewground.com

Any help would be appreciated.

Thanks!

Hello There,

Thanks for writing in! You will have to edit your header and create additional container. You will need to separate the two buttons in its own containers so that you can line them up next to each other.

Please let us know how it goes.

Hi RueNel,

I tried your suggestion; it works to create two buttons beside each other, but I can’t seem to figure out how to then get those two buttons centered below my first container’s content. As of now, the new button rows are adding horizontally to the right instead of vertically.

I know it’s probably a simple fix, but nothing I change seems to fix it. Any help would be great.

Hi There,

I could see that the height of buttons are different.

First, please enable marginless columns option of your row:

Then add this custom CSS under Theme Options > CSS:

.x-section .x-container.marginless-columns>.x-column {
     vertical-align: middle;
}

Hope it helps :slight_smile:

Thanks for that, I’ll take a look. However, my question was in reference to the header of my site. – Here’s what I’m seeing when I try what RueNel suggested:

I need to move those two buttons to where the current “learn more” is below my text and can’t find what it is that will change it

Hello There,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look at your header settings? To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password (only if necessary)

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Sure. It’s the header titled: “TNG_HOME”. – I should note that I’ve removed the extra buttons on the right of my previous screenshot because the site is live and in use. Feel free to poke around and recreate the issue.

Thanks guys!

Hi There,

Please add another Container to your Bar where you’re going to place the buttons.



Make that Container a Fill Space, Horizontally Center, and a bottom padding that is equal to the top padding of the first container.



Inspect the first Container and set the Self Flex to Standard, and zero out the bottom padding.



Remove the Gap element and button that you added on this Container.

Then inspect your Bar (of this 2 containers) and enable the Wrap Children option of it.



See the X Copy of TNG_HOME header for your reference.

Hope it helps,
Cheers!

PERFECT.

This helps a lot. Thank you!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.