X Pro - Creating vertical menu across three columns in footer

Hi, I am using X Pro theme and for the life of me I can’t work out how to create three columns in the footer for two menu’s. Menu one a single column. Menu two spread across two columns, similar this…

Sorry not sure I described, this is what I have at present is like this image below using Pro.

The quick links column is one menu, but I wanted it to auto hit the bottom of the element/container, and wrap into two columns.

Also the right hand logo container I cant seem to get the individual elements to sit under each other either.

But then on the mobile view, rather than them all cascade under each other, they’re staying on one row, so appear squashed and unreadable.

I am struggling to understand how Pro works I think, if you can advise? Thanks.

Hi @ocduk,

Would you please double check the HTML User/Pass as I could not get into the page in question.

Please consider that the mobile version of the Header/Footer needs to be handled by hiding the desktop ones and using the mobile ones. So you will need to have new bars for the mobile view and hide/show them during the breakpoint.

Also, it seems that you have few issues using the Flexbox feature which I suggest that you read this and this article.

Finally, I suggest that you bookmark our Knowledgebase as you will find great information on how to use our Header/Footer builders.

Thank you.

Hi Christopher,

I have reset all the HTML and ACP passwords, should work now.

So still a couple of issues.

So I have resolved the right hand logo column. With the social media icons, I couldn’t use the social elements in a row for each social media icon because I had set the container to be column so it would set the three icons in a column. Instead I had to create the social media icons as a menu and add that as an inline navigation. Is that the right way to manage that? To achieve the same customer social media colours on hover, I need to use menu CSS is that right?

I understand to get the menu’s looking how I want on mobile I need to create a second row only visible on mobiles and hide the main one on desktop?

But on the desktop I am still struggling with column 1 of making that menu list of 1 items wrap into two columns. I assume this should be possible?

Thanks, Ashley

Hi @ocduk,

I still couldn’t login to the authentication popup of your site. Couldn’t check it.

  1. Yes, you’ll need a custom CSS since it has no color option available.

  2. Could be possible but with custom CSS, please provide the correct credentials and I’ll test it. I must test it on your setup as I’m not sure what selectors are they using. I can’t promise a complete solution, but yes, custom CSS is the only way.

Thanks!

Hi Rad,

Sorry for the delay, I have updated the HTML password in the secure note. Hopefully this will work.

Hello There,

To have a two column menu, please play around with the Self Flex and the Item Flex settings.

We would loved to know if this has work for you. Thank you.

Thanks RueNel,

Very helpful as always, you guys are such a help. That did the trick. I have just one slight CSS question. As the image shows I now have the menu split into two columns but not left justified. But in the Pro settings I cant seem to find anything that changes that.

I looked at the CSS and this controls it:

.x-menu-inline>li {
    display: -webkit-flex;
}

So should I just change that via my custom CSS or is there an actual setting in Pro that I am missing that I can control it with? Thanks.
Ashley.

Hi @ocduk,

Yes, you could do that by changing the TOP LINKS > CONTENT FLEX LAYOUT > HORIZONTAL to Start instead of Center.

Thanks!

Perfect… thank you. All resolved.

You’re most welcome!

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