Pro - Footer column alignment

Hi,

I am struggling to achieve something.
I am using Pro to create a footer with 4 elements (as you can see in the attached image), there’s a logo on the left and four menu (containers) on the right. At the moment they are equally spread through the footer.

I want to have the logo aligned to the left (as it is) and the three menus aligned to the right (closer together), which means a bigger gap between the logo and the menus.

How can I achieve that?

Please see the footer of https://slack.com/ as an example.

Thank you

Hi,

To achieve that, you can build your menu using global blocks. A section with three columns and use layered navigation for your menu.

Then set your footer to only have two containers. Add your image/logo in the first container and add your global block shortcode in a text element in the second container.

Make sure your bar horizontal layout is set to Space between

Hope this helps

Hi Paul,

Thank you for your answer.
That didn’t help at all. Please read my request carefully without rushing an answer.

  1. As you can see from the image I upload, there’s an element called Navigation Inline (which is a menu) and Global Blocks don’t have the option of adding menus.
  2. I tried your solution with 3 (columns) blocks of text, and the result is what you can see in the uploaded image. :open_mouth:

So, again. Is there a way to add 3 menus and align them on right of the footer?

Thank you

Hi,

I checked and there is a navigation inline element.

Layout of Global Block

This is how it looks when I added it in the second container

Container 1 - Image

Container 2 - Global Block

Please make sure you have this set in your bar element

Hope this helps

Hi paul,

Thank you for your answer.
You are right, there is a navigation inline that I was not aware. I am sorry for that.
But, the problem persist. I don’t know exactly what you have done but it does not work on my end.

I followed all your steps and even did it again from scratch.

See, the global block with headline and navigation inline:

And what happens when I do what you sugested:

I don’t know why, but the text change color, it gets huge, the menu alignment is horizontal now!!!
I have theme-x updated and everything else.

This is getting a bit frustrating to me.
Hope you (or someone else) can help.

Cheers

Hi There,

Sorry that you’re having that issues now, I suggest that you review how Flexbox work first and then redo your footer.

A Complete Guide to Flexbox
Using Flexbox

I also created an unfinished test footer in there for your reference.

Let us know if there is something that is not clear about flexbox.

Cheers!

Hi,

Didn’t know it was that complex to do such a “basic” thing.
I will have a look into the Flexbox, and will came back if I’m still no achieving my goal.

Thank you

Sure, let us know. Compared to float based layout, flex is more consistent.

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