[Resolved] How to create this kind of navigation at site footer?

[Paul]

Hi, there

I want this kind of navigation at site footer – https://prnt.sc/PmDNnehVPhUA ( pls check the original link from the private information)

now im using Element → choosing” Block “, then choose Site Footer as Element Type.

then add ” Container”

Please note that The menu of red box 1 will be one line from left to right, it seems like the example i sent

how many ways are there to make this content layout?

I hope to receive 2 ways to do that because I want to try something different ways if possible.

thanks in advance

[David]

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

[Paul]

hello, david

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

[David]

Looks good 🙂

[Paul]

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?

[Paul]

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

[David]

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;
    }
}

[Paul]

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

[David]

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%

[Paul]

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

[David]

Thats correct.

[Paul]

Thnaks much for your patience and have a great day.

[David]

You’re welcome 🙂

[Author]

Posts