Placing Buttons Inline in Flex Column

[zenzino]

I have a header based on the Sticky template.

https://madisonbusinessplans.com

I changed the flex container to Columns because the buttons were beside the subheadline on wider screens.

However, I would like the buttons side by side (inline) instead of stacked. I tried adding another container for the buttons but it pushed everything up out of the page. I also tried display: inline-block; for the button elements which didn’t work.

Is there a way to get the ‘Attend An Event’ and ‘Find Out More’ buttons side by side?

Update
I changed the flex container back to ‘Row’ with ‘Wrap children’ checked because it didn’t work on mobile devices.

Now my problem is to get the buttons under the subheadline in wider screens.

Sorry for the confusion.

Thanks.

[rad]

Hi @zenzino,

Thanks for reaching out.

How about having your buttons added to a separate header bar? In your current setup, the big background and the contents are on the same header bar. You can actually have multiple header bars where 1 single header bar is for a separate background, just make sure its position is absolute. And with that, all other header bars will be displayed on top of it that looks like it’s a single header. Please check this video recording https://www.dropbox.com/s/u6otkmiekgbu7tq/bandicam%202019-05-12%2007-49-22-461.mp4?dl=0

The idea is the same, you may want to make the text header bar and better bar total height equal to the background. So the menu header bar will stll start below the background bar.

Thanks!

[zenzino]

Hey @Rad,

Thanks for your response.

That seems like a complicated solution to what should be a simple problem.

When I make the bar with the background image position: absolute, the nav bar no longer sits at the bottom of the screen. Since the heights of each bar are dependent on the window height, I’m not sure how to do that while keeping the navigation bar at the bottom of the page until the page is scrolled down.

Thanks,
Don

[friech]

Hi Don,

Make the text REMOVE GUESSWORK FROM RUNNING AND GROWING YOUR BUSINESS. 100% in width, that way the two buttons will be forced to wrap.

Hope it helps,
Cheers!

[zenzino]

Hi @friech,

Thanks for the input.

That worked to make the buttons wrap to below the subheadline.

However, that subheadline had a transparent black background which has also gon full-width rather than just a box around the subheadline. I tried using display: inline-block; in the Element CSS but that didn’t work.

Any other ideas?

Thanks

[friech]

Hi Don,

In that case, please remove the background and padding on that subheadline. Then add this on that headline’s Element CSS area.

$el .x-text-content-text-primary {
	width: fit-content;
	width: -moz-fit-content;
	background-color: rgba(0,0,0,0.65);
	padding: 1em 2em;
	margin: 0 auto;
}

Cheers!

[zenzino]

Hey @friech,

That worked!

I had to add !important to the margin to make it center the type but now it looks perfect.

Thank you so much for your help.

As always, you guys are awesome!

Cheers,
Don

[Prasant]

You are most welcome.