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

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

Home Forums Support How to create this kind of navigation at site footer?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2375967
    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

    #2376064
    David
    Staff
    Customer Support

    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

    #2376077
    Paul

    hello, david

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

    #2376101
    David
    Staff
    Customer Support

    Looks good 🙂

    #2376104
    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?

    #2376109
    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

    #2376134
    David
    Staff
    Customer Support

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

    #2376177
    David
    Staff
    Customer Support

    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%

    #2376267
    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

    #2376269
    David
    Staff
    Customer Support

    Thats correct.

    #2376961
    Paul

    Thnaks much for your patience and have a great day.

    #2377143
    David
    Staff
    Customer Support

    You’re welcome 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.