Navigation inline 2 columns

[lentaspace]

Hi, I have a very long inline navigation which I would like to display in equal columns. Any chance I can achieve that?

Thanks

[jade]

Hi Ryan,

Please set the flex options of the Navigation Inline to the following:

Hope this helps.

[lentaspace]

Hi! Thanks for replying, unfortunately that didn’t work. it put it in a very long row.

[jade]

Hi Ryan,

Please set the Self Flex option to Fill Space instead then you should have this result:

Hope this helps.

[lentaspace]

Hi Jade,

Thanks for looking into but it’s the footer section I was reffering to, I have attached image

[nabeel]

Hey Ryan,

Thank you for the screenshot. This can be achieved with custom CSS, you can add the following code in the Element CSS section of your Navigation Inline element:

$el {
    display: grid;
    grid-template-columns: 66.667% 33.334%;	
}

To learn more about CSS Grids, please see https://css-tricks.com/snippets/css/complete-guide-grid/

Hope this helps!

[lentaspace]

Thanks, I did apply the above but the links are cropping out

[ruenel]

Hello Ryan,

Your flexbox layout option for the menu and the toplinks should be adjusted.

• 

• 

I went ahead and changed the setting already. Kindly check your footer now.

[lentaspace]

Hi there. Thank you so much for doing that for me. I just wonder if this is how it should actually be?

Thanks

[christian]

Hey Ryan,

I believe so. Just let us know if you encounter issues with the suggested setup.

Thanks.

[lentaspace]

I have attached in the above, it cuts out the links? You can see on the inspect element.

Thanks

[ruenel]

Hello Ryan,

Please update the css and use this instead:

$el {
    display: grid;
    grid-template-columns: 48% 48%;
}

$el.x-menu > li > a{
    display: block;
}

We would love to know if this has worked for you. Thank you.

[lentaspace]

Yes that worked just fine - thank you @ruenel

[christian]

We’re glad your menu is set up now.