How to create this kind of navigation at site footer?

Hi there,

its none too complicated you want a Container Block to form the main footer with blue background.
Within that you can stack Navigation Blocks and Grid Block for your 2 columns see here:

https://www.screencast.com/t/iavZUddAiow

hello, david

now i did that like this screenshot https://prnt.sc/sxwMh4Ld3lF1

Looks good :)

hello david

i add Foot menu Navigation to container, it is wrap to two lines,

pls check it the screenshot https://prnt.sc/7BaRjahQvlr7 i WANT the layout from red box 1 the same as menu layout from red box 2

it is possible, if so, then how to do?

hiello, david

My own method is they're in two rows, so how do I adjust them to one row https://prnt.sc/EBbMh6MgRpgY

If directly adding the foot navigation menu, they are in one line, but it will show the overlay menu in mobile phone, i want them vertical orentation when use check it in mobile phone,

pls explain, thanks

Use the Navigation Block, and then add this CSS to make it stack on Mobile:

@media(min-width: 769px) {
    .wp-block-navigation__container {
        flex-direction: column;
    }
}

hello,

i will use css for Navigation Block.

but, My own method is they’re in two rows, so how do I adjust them to one row https://prnt.sc/EBbMh6MgRpgY

Please give me your help. Thank you

Each Container in the Grid will have its Layout > Width. Those are percentage values.
You will need to adjust the widths eg.

If you have 9 columns, you can do 100% / 9 = 11%. So to keep all columns on the one line then their average width cannot be greater that 11%

hello david,

i need to add css to " Additional CSS" from customize

@media(min-width: 769px) {
.wp-block-navigation__container {
flex-direction: column;
}
}

pls check the screenshot https://prnt.sc/iv16KMR75QZF

Thats correct.

Thnaks much for your patience and have a great day.

You're welcome :)